@nyaruka/temba-components 0.113.0 → 0.114.1

package/src/utils/index.ts

@@ -516,6 +516,18 @@ export class Stubbable {
 
 export const stubbable = new Stubbable();
 
+export const spreadAttributes = (obj): TemplateResult[] => {
+  return Object.entries(obj).map(([key, value]) => {
+    if (key.startsWith('@')) {
+      return html`@${key.slice(1)}=${value}`;
+    } else if (key.startsWith('.')) {
+      return html`.${key.slice(1)}=${value}`;
+    } else {
+      return html`${key}=${value}`;
+    }
+  });
+};
+
 export const timeSince = (
   date: Date,
   options: { compareDate?: Date; hideRecentText?: boolean; suffix?: string } = {
@@ -730,14 +742,6 @@ export const stopEvent = (event: Event) => {
   }
 };
 
-export const getFullName = (user: User) => {
-  if (user.first_name && user.last_name) {
-    return `${user.first_name} ${user.last_name}`;
-  }
-
-  return user.email;
-};
-
 /**
  * Extracts 2-letter initials from text like a workspace or user name
  * @param text the input text

package/temba-modules.ts

@@ -32,7 +32,6 @@ import { ContactFieldEditor } from './src/contacts/ContactFieldEditor';
 
 import { ContactBadges } from './src/contacts/ContactBadges';
 import { ContactPending } from './src/contacts/ContactPending';
-import { ContactTickets } from './src/contacts/ContactTickets';
 import { TembaSlider } from './src/slider/TembaSlider';
 import { RunList } from './src/list/RunList';
 import { FlowStoreElement } from './src/flow/FlowStoreElement';
@@ -62,6 +61,8 @@ import { OutboxMonitor } from './src/outboxmonitor/OutboxMonitor';
 import { ProgressBar } from './src/progress/ProgressBar';
 import { StartProgress } from './src/progress/StartProgress';
 import { ShortcutList } from './src/list/ShortcutList';
+import { PopupSelect } from './src/select/PopupSelect';
+import { UserSelect } from './src/select/UserSelect';
 
 export function addCustomElement(name: string, comp: any) {
   if (!window.customElements.get(name)) {
@@ -114,7 +115,6 @@ addCustomElement('temba-tabs', TabPane);
 addCustomElement('temba-tab', Tab);
 addCustomElement('temba-contact-badges', ContactBadges);
 addCustomElement('temba-contact-pending', ContactPending);
-addCustomElement('temba-contact-tickets', ContactTickets);
 addCustomElement('temba-slider', TembaSlider);
 addCustomElement('temba-content-menu', ContentMenu);
 addCustomElement('temba-compose', Compose);
@@ -134,3 +134,5 @@ addCustomElement('temba-outbox-monitor', OutboxMonitor);
 addCustomElement('temba-progress', ProgressBar);
 addCustomElement('temba-start-progress', StartProgress);
 addCustomElement('temba-shortcuts', ShortcutList);
+addCustomElement('temba-popup-select', PopupSelect);
+addCustomElement('temba-user-select', UserSelect);

package/test/temba-omnibox.test.ts

@@ -1,14 +1,66 @@
 import { fixture, assert } from '@open-wc/testing';
 import { Omnibox } from '../src/omnibox/Omnibox';
-import './utils.test';
+import { assertScreenshot, getClip } from './utils.test';
+import { openAndClick } from './temba-select.test';
+import { useFakeTimers, spy } from 'sinon';
 
-export const getHTML = () => {
-  return `<temba-omnibox></temba-omnibox>`;
+export const getHTML = (attrs: any = { name: 'recipients' }): string => {
+  const selectHTML = `
+  <temba-omnibox${Object.keys(attrs)
+    .map((name: string) => {
+      // check if it's a string attribute
+      if (typeof attrs[name] === 'string') {
+        return ` ${name}="${attrs[name].replace(/"/g, '&quot;')}"`;
+      }
+      return ` ${name}="${attrs[name]}"`;
+    })
+    .join(' ')}>
+  </temba-select>`;
+  return selectHTML;
+};
+
+export const createOmnibox = async (
+  clock: any,
+  attrs: any = {}
+): Promise<Omnibox> => {
+  const parentNode = document.createElement('div');
+  parentNode.setAttribute('style', 'width: 250px;');
+
+  const omnibox: Omnibox = await fixture(getHTML(attrs), { parentNode });
+  clock.runAll();
+  await omnibox.updateComplete;
+  return omnibox;
 };
 
 describe('temba-omnibox', () => {
+  let clock: any;
+  beforeEach(function () {
+    clock = useFakeTimers();
+    setViewport({ width: 500, height: 1000, deviceScaleFactor: 2 });
+  });
+
+  afterEach(function () {
+    clock.restore();
+  });
+
   it('can be created', async () => {
-    const omnibox: Omnibox = await fixture(getHTML());
+    const omnibox: Omnibox = await fixture(
+      getHTML({ endpoint: '/test-assets/select/omnibox.json' })
+    );
     assert.instanceOf(omnibox, Omnibox);
   });
+
+  it('fires change events on selection', async () => {
+    const omnibox: Omnibox = await createOmnibox(clock, {
+      endpoint: '/test-assets/select/omnibox.json'
+    });
+
+    const changeEvent = spy();
+    omnibox.addEventListener('change', changeEvent);
+
+    await openAndClick(clock, omnibox, 0);
+    assert(changeEvent.called, 'change event not fired');
+
+    await assertScreenshot('omnibox/selected', getClip(omnibox));
+  });
 });