@nyaruka/temba-components 0.26.8 → 0.26.9

package/out-tsc/temba-modules.js.map

@@ -1 +1 @@
-{"version":3,"file":"temba-modules.js","sourceRoot":"","sources":["../temba-modules.ts"],"names":[],"mappings":"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","sourcesContent":["import { Checkbox } from './src/checkbox/Checkbox';\nimport { TextInput } from './src/textinput/TextInput';\nimport { Store } from './src/store/Store';\nimport { Select } from './src/select/Select';\nimport { Completion } from './src/completion/Completion';\nimport { Modax } from './src/dialog/Modax';\nimport { Dialog } from './src/dialog/Dialog';\nimport { Button } from './src/button/Button';\nimport { FormField } from './src/formfield/FormField';\nimport { Loading } from './src/loading/Loading';\nimport { CharCount } from './src/charcount/CharCount';\nimport { Options } from './src/options/Options';\nimport { ContactChat } from './src/contacts/ContactChat';\nimport { ContactHistory } from './src/contacts/ContactHistory';\nimport { TicketList } from './src/list/TicketList';\nimport { ContactDetails } from './src/contacts/ContactDetails';\nimport { TembaList } from './src/list/TembaList';\nimport { ContactSearch } from './src/contactsearch/ContactSearch';\nimport { VectorIcon } from './src/vectoricon/VectorIcon';\nimport { Alert } from './src/alert/Alert';\nimport { Omnibox } from './src/omnibox/Omnibox';\nimport { Tip } from './src/tip/Tip';\nimport { TembaMenu } from './src/list/TembaMenu';\nimport { Anchor } from './src/anchor/Anchor';\nimport { Dropdown } from './src/dropdown/Dropdown';\nimport { TabPane } from './src/tabpane/TabPane';\nimport { Tab } from './src/tabpane/Tab';\n\nexport function addCustomElement(name: string, comp: any) {\n  if (!window.customElements.get(name)) {\n    window.customElements.define(name, comp);\n  }\n}\n\naddCustomElement('temba-anchor', Anchor);\naddCustomElement('temba-alert', Alert);\naddCustomElement('temba-store', Store);\naddCustomElement('temba-textinput', TextInput);\naddCustomElement('temba-completion', Completion);\naddCustomElement('temba-checkbox', Checkbox);\naddCustomElement('temba-select', Select);\naddCustomElement('temba-options', Options);\naddCustomElement('temba-loading', Loading);\naddCustomElement('temba-button', Button);\naddCustomElement('temba-omnibox', Omnibox);\naddCustomElement('temba-tip', Tip);\n\naddCustomElement('temba-field', FormField);\naddCustomElement('temba-dialog', Dialog);\naddCustomElement('temba-modax', Modax);\naddCustomElement('temba-charcount', CharCount);\naddCustomElement('temba-contact-history', ContactHistory);\naddCustomElement('temba-contact-chat', ContactChat);\naddCustomElement('temba-contact-details', ContactDetails);\naddCustomElement('temba-ticket-list', TicketList);\naddCustomElement('temba-list', TembaList);\naddCustomElement('temba-menu', TembaMenu);\naddCustomElement('temba-contact-search', ContactSearch);\naddCustomElement('temba-icon', VectorIcon);\naddCustomElement('temba-dropdown', Dropdown);\naddCustomElement('temba-tabs', TabPane);\naddCustomElement('temba-tab', Tab);\n"]}
+{"version":3,"file":"temba-modules.js","sourceRoot":"","sources":["../temba-modules.ts"],"names":[],"mappings":"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","sourcesContent":["import { Checkbox } from './src/checkbox/Checkbox';\nimport { TextInput } from './src/textinput/TextInput';\nimport { Store } from './src/store/Store';\nimport { Select } from './src/select/Select';\nimport { Completion } from './src/completion/Completion';\nimport { Modax } from './src/dialog/Modax';\nimport { Dialog } from './src/dialog/Dialog';\nimport { Button } from './src/button/Button';\nimport { FormField } from './src/formfield/FormField';\nimport { Loading } from './src/loading/Loading';\nimport { CharCount } from './src/charcount/CharCount';\nimport { Options } from './src/options/Options';\nimport { ContactChat } from './src/contacts/ContactChat';\nimport { ContactHistory } from './src/contacts/ContactHistory';\nimport { TicketList } from './src/list/TicketList';\nimport { ContactDetails } from './src/contacts/ContactDetails';\nimport { TembaList } from './src/list/TembaList';\nimport { ContactSearch } from './src/contactsearch/ContactSearch';\nimport { VectorIcon } from './src/vectoricon/VectorIcon';\nimport { Alert } from './src/alert/Alert';\nimport { Omnibox } from './src/omnibox/Omnibox';\nimport { Tip } from './src/tip/Tip';\nimport { TembaMenu } from './src/list/TembaMenu';\nimport { Anchor } from './src/anchor/Anchor';\nimport { Dropdown } from './src/dropdown/Dropdown';\nimport { TabPane } from './src/tabpane/TabPane';\nimport { Tab } from './src/tabpane/Tab';\nimport Label from './src/label/Label';\nimport { ContactGroups } from './src/contacts/ContactGroups';\nimport { ContactName } from './src/contacts/ContactName';\nimport { ContactUrn } from './src/contacts/ContactUrn';\nimport { ContactFields } from './src/contacts/ContactFields';\nimport { ContactFieldEditor } from './src/contacts/ContactFieldEditor';\n\nexport function addCustomElement(name: string, comp: any) {\n  if (!window.customElements.get(name)) {\n    window.customElements.define(name, comp);\n  }\n}\n\naddCustomElement('temba-anchor', Anchor);\naddCustomElement('temba-alert', Alert);\naddCustomElement('temba-store', Store);\naddCustomElement('temba-textinput', TextInput);\naddCustomElement('temba-completion', Completion);\naddCustomElement('temba-checkbox', Checkbox);\naddCustomElement('temba-select', Select);\naddCustomElement('temba-options', Options);\naddCustomElement('temba-loading', Loading);\naddCustomElement('temba-button', Button);\naddCustomElement('temba-omnibox', Omnibox);\naddCustomElement('temba-tip', Tip);\n\naddCustomElement('temba-field', FormField);\naddCustomElement('temba-dialog', Dialog);\naddCustomElement('temba-modax', Modax);\naddCustomElement('temba-charcount', CharCount);\naddCustomElement('temba-contact-history', ContactHistory);\naddCustomElement('temba-contact-chat', ContactChat);\naddCustomElement('temba-contact-details', ContactDetails);\naddCustomElement('temba-ticket-list', TicketList);\naddCustomElement('temba-list', TembaList);\naddCustomElement('temba-label', Label);\naddCustomElement('temba-menu', TembaMenu);\naddCustomElement('temba-contact-search', ContactSearch);\naddCustomElement('temba-icon', VectorIcon);\naddCustomElement('temba-dropdown', Dropdown);\naddCustomElement('temba-tabs', TabPane);\naddCustomElement('temba-tab', Tab);\naddCustomElement('temba-contact-name', ContactName);\naddCustomElement('temba-contact-field', ContactFieldEditor);\naddCustomElement('temba-contact-fields', ContactFields);\naddCustomElement('temba-urn', ContactUrn);\naddCustomElement('temba-contact-groups', ContactGroups);\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyaruka/temba-components",
-  "version": "0.26.8",
+  "version": "0.26.9",
   "description": "Web components to support rapidpro and related projects",
   "author": "Nyaruka <code@nyaruka.coim>",
   "main": "dist/index.js",
@@ -29,7 +29,6 @@
     "version": "yarn run build && auto-changelog -p && git add CHANGELOG.md"
   },
   "dependencies": {
-    "flru": "^1.0.2",
     "geojson": "^0.5.0",
     "highlight.js": "^10.7.1",
     "image-size": "^0.9.7",
@@ -38,7 +37,8 @@
     "lit-flatpickr": "^0.3",
     "marked": "4.0.10",
     "remarkable": "^2.0.1",
-    "serialize-javascript": "^3.0.0"
+    "serialize-javascript": "^3.0.0",
+    "tiny-lru": "^8.0.2"
   },
   "devDependencies": {
     "@babel/core": "7.11.0",

package/rollup.config.js

@@ -58,6 +58,7 @@ const rollupConfig = merge(baseConfig, {
     copy({
       targets: [
         { src: 'static/icons/symbol-defs.svg', dest: 'dist/static/icons/' },
+        { src: 'static/img', dest: 'dist/static/' },
         {
           src: 'dist/*.js',
           dest: 'dist/',

package/src/RapidElement.ts

@@ -9,7 +9,6 @@ export interface EventHandler {
 
 export class RapidElement extends LitElement {
   private eles: { [selector: string]: HTMLDivElement } = {};
-
   public getEventHandlers(): EventHandler[] {
     return [];
   }

package/src/RefreshElement.ts

@@ -0,0 +1,33 @@
+import { PropertyValueMap } from 'lit';
+import { property } from 'lit/decorators';
+import { CustomEventType } from './interfaces';
+import { RapidElement } from './RapidElement';
+import { Store } from './store/Store';
+
+export class RefreshElement extends RapidElement {
+  @property({ type: String })
+  endpoint: string;
+
+  protected updated(
+    properties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    if (properties.has('endpoint')) {
+      this.refresh();
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected refreshComplete(results: any) {
+    // noop
+  }
+
+  public refresh(force = false) {
+    const store = document.querySelector('temba-store') as Store;
+    if (store) {
+      store.getResults(this.endpoint, { force }).then((results: any[]) => {
+        this.fireCustomEvent(CustomEventType.Refreshed, results);
+        this.refreshComplete(results);
+      });
+    }
+  }
+}

package/src/button/Button.ts

@@ -157,6 +157,9 @@ export class Button extends LitElement {
   @property({ type: Boolean })
   destructive: boolean;
 
+  @property({ type: Boolean })
+  light: boolean;
+
   @property()
   name: string;
 
@@ -227,6 +230,7 @@ export class Button extends LitElement {
           'active-button': this.active,
           'attention-button': this.attention,
           'destructive-button': this.destructive,
+          'light-button': this.light,
         })}"
         tabindex="0"
         @mousedown=${this.handleMouseDown}

package/src/contacts/ContactChat.ts

@@ -1,17 +1,16 @@
 import { css, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators';
-import { RapidElement } from '../RapidElement';
 import { Contact, CustomEventType, Ticket } from '../interfaces';
 import { COOKIE_KEYS, getCookieBoolean, postJSON, setCookie } from '../utils';
 import { TextInput } from '../textinput/TextInput';
 import { Completion } from '../completion/Completion';
 import { ContactHistory } from './ContactHistory';
 import { Modax } from '../dialog/Modax';
-import { fetchContact } from './helpers';
+import { ContactStoreElement } from './ContactStoreElement';
 
 const DEFAULT_REFRESH = 10000;
 
-export class ContactChat extends RapidElement {
+export class ContactChat extends ContactStoreElement {
   public static get styles() {
     return css`
       .left-pane {
@@ -164,9 +163,6 @@ export class ContactChat extends RapidElement {
     `;
   }
 
-  @property({ type: String, attribute: 'contact' })
-  contactUUID: string;
-
   @property({ type: String, attribute: 'ticket' })
   ticketUUID: string;
 
@@ -241,17 +237,12 @@ export class ContactChat extends RapidElement {
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
 
-    // we were provided a uuid, fetch our contact details
-    if (changedProperties.has('contactUUID') && this.contactUUID) {
-      fetchContact(this.contactsEndpoint + '?uuid=' + this.contactUUID).then(
-        contact => {
-          this.currentContact = contact;
-        }
-      );
-    }
-
     // if we don't have an endpoint infer one
-    if (changedProperties.has('currentContact')) {
+    if (
+      changedProperties.has('data') ||
+      changedProperties.has('currentContact')
+    ) {
+      this.currentContact = this.data;
       // focus our completion on load
       const prevContact = changedProperties.get('contact');
       if (

package/src/contacts/ContactFieldEditor.ts

@@ -0,0 +1,201 @@
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { RapidElement } from '../RapidElement';
+import { TextInput } from '../textinput/TextInput';
+
+export class ContactFieldEditor extends RapidElement {
+  @property({ type: String })
+  key: string;
+
+  @property({ type: String })
+  value: string;
+
+  @property({ type: String })
+  name: string;
+
+  @property({ type: String })
+  type: string;
+
+  @property({ type: String })
+  icon = navigator.clipboard ? 'copy' : '';
+
+  @property({ type: String })
+  iconClass = '';
+
+  static get styles() {
+    return css`
+      .prefix {
+        background: rgba(0, 0, 0, 0.05);
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+        color: #888;
+        cursor: pointer;
+        width: 100px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: flex;
+        padding: 0em 0.5em;
+      }
+
+      .prefix .name {
+        padding: 0.5em 0em;
+        color: #888;
+        width: 80px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .postfix {
+        display: flex;
+        align-items: stretch;
+      }
+
+      .popper {
+        padding: 0.5em 0.75em;
+        background: rgba(240, 240, 240, 1);
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        --icon-color: #888;
+        opacity: 0;
+        cursor: default;
+        transform: scale(0.5);
+        transition: all 300ms ease-in-out;
+        display: flex;
+        align-items: stretch;
+        z-index: 1000;
+      }
+
+      .postfix temba-icon[name='calendar'] {
+        --icon-color: #e3e3e3;
+      }
+
+      .popper.check {
+        background: rgba(90, 145, 86, 0.15);
+      }
+
+      .popper.none {
+        opacity: 0;
+      }
+
+      .popper.copy temba-icon:hover {
+        --icon-color: #555;
+      }
+
+      .popper.corner-down-left {
+        // background: var(--color-primary-dark);
+        // --icon-color: var(--color-text-light);
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      temba-icon {
+        cursor: pointer;
+      }
+
+      temba-icon[name='check'] {
+        --icon-color: rgb(90, 145, 86);
+      }
+
+      temba-textinput:hover .popper.copy {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      temba-textinput:focus .popper.copy {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      .copy.clicked temba-icon {
+        transform: scale(1.2);
+      }
+
+      temba-icon {
+        transition: all 200ms ease-in-out;
+      }
+    `;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.handleInput = this.handleInput.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  public handleIconClick(evt: MouseEvent) {
+    const ele = evt.target as HTMLDivElement;
+    const icon = ele.getAttribute('name');
+    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;
+
+    if (icon === 'copy') {
+      if (navigator.clipboard) {
+        this.iconClass = 'clicked';
+        navigator.clipboard.writeText(input.getDisplayValue()).then(() => {
+          window.setTimeout(() => {
+            this.iconClass = '';
+          }, 300);
+        });
+      }
+    }
+    evt.preventDefault();
+    evt.stopPropagation();
+  }
+
+  public handleSubmit() {
+    const input = this.shadowRoot.querySelector('temba-textinput') as TextInput;
+    if (input.value !== this.value) {
+      this.value = input.value;
+      this.fireEvent('change');
+    }
+    this.icon = navigator.clipboard ? 'copy' : '';
+  }
+
+  public handleChange(evt: Event) {
+    evt.preventDefault();
+    evt.stopPropagation();
+  }
+
+  public handleInput(evt: KeyboardEvent) {
+    if (evt.key === 'Enter') {
+      const input = evt.currentTarget as TextInput;
+      input.blur();
+    }
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div>
+        <temba-textinput
+          value="${this.value ? this.value : ''}"
+          ?datetimepicker=${this.type === 'datetime'}
+          @blur=${this.handleSubmit}
+          @keydown=${this.handleInput}
+          @change=${this.handleChange}
+        >
+          <div class="prefix" slot="prefix">
+            <div class="name">${this.name}</div>
+          </div>
+
+          <div class="postfix">
+            ${this.type === 'datetime'
+              ? html`<div
+                  style="position: absolute; padding-top: .75em; padding-left: .75em;"
+                >
+                  <temba-icon name="calendar" />
+                </div>`
+              : null}
+
+            <div
+              class="popper ${this.iconClass} ${this.icon ? this.icon : 'none'}"
+              @click=${this.handleIconClick}
+            >
+              <temba-icon name="${this.icon}" animatechange="spin"></temba-icon>
+            </div>
+          </div>
+        </temba-textinput>
+      </div>
+    `;
+  }
+}

package/src/contacts/ContactFields.ts

@@ -0,0 +1,112 @@
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { ContactField } from '../interfaces';
+import { postJSON } from '../utils';
+import { ContactFieldEditor } from './ContactFieldEditor';
+import { ContactStoreElement } from './ContactStoreElement';
+
+export class ContactFields extends ContactStoreElement {
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-wrap: wrap;
+        flex-shrink: 1;
+      }
+
+      .field {
+        display: flex;
+        margin: 0.3em 0.3em;
+        box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.15);
+        border-radius: var(--curvature);
+        align-items: center;
+        overflow: hidden;
+      }
+
+      .field.set {
+        background: #fff;
+      }
+
+      .field.unset {
+        opacity: 0.4;
+      }
+
+      .field.unset .label {
+      }
+
+      .field:hover {
+      }
+
+      .field:hover {
+        box-shadow: 1px 1px 6px 2px rgba(0, 0, 0, 0.05),
+          0px 0px 0px 2px var(--color-link-primary);
+        cursor: pointer;
+      }
+
+      .label {
+        padding: 0.25em 1em;
+        border-top-left-radius: var(--curvature);
+        border-bottom-left-radius: var(--curvature);
+        color: #777;
+        font-size: 0.9em;
+        font-weight: 400;
+        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1) inset;
+      }
+
+      .value {
+        --icon-color: #ddd;
+        max-width: 150px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding: 0.25em 1em;
+        border-top-right-radius: var(--curvature);
+        border-bottom-right-radius: var(--curvature);
+        font-size: 0.9em;
+      }
+
+      temba-contact-field {
+        margin: 0.3em;
+        min-width: 320px;
+        flex-grow: 1;
+      }
+    `;
+  }
+
+  @property({ type: Boolean })
+  dirty: boolean;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.handleFieldChanged = this.handleFieldChanged.bind(this);
+  }
+
+  public handleFieldChanged(evt: InputEvent) {
+    const field = evt.currentTarget as ContactFieldEditor;
+    this.data.fields[field.key] = field.value;
+    postJSON('/api/v2/contacts.json?uuid=' + this.data.uuid, {
+      fields: { [field.key]: field.value },
+    }).then(() => {
+      this.refresh();
+    });
+  }
+
+  public render(): TemplateResult {
+    const pinned = this.store.getPinnedFields();
+
+    const fields = pinned.map((field: ContactField) => {
+      if (this.data) {
+        const value = this.data.fields[field.key];
+        return html`<temba-contact-field
+          key=${field.key}
+          name=${field.label}
+          value=${value}
+          type=${field.value_type}
+          @change=${this.handleFieldChanged}
+        ></temba-contact-field>`;
+      }
+    });
+
+    return html`${this.data ? html` ${fields} ` : null}`;
+  }
+}

package/src/contacts/ContactGroups.ts

@@ -0,0 +1,41 @@
+import { css, html, TemplateResult } from 'lit';
+import { Group } from '../interfaces';
+import { ContactStoreElement } from './ContactStoreElement';
+
+export class ContactGroups extends ContactStoreElement {
+  static get styles() {
+    return css`
+      .groups {
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      temba-label {
+        margin: 0.3em;
+      }
+    `;
+  }
+
+  public render(): TemplateResult {
+    return html`${this.data
+      ? html`
+          <div class="groups">
+            ${this.data.groups.map((group: Group) => {
+              return html`
+                <temba-label
+                  onclick="goto(event)"
+                  href="/contact/filter/${group.uuid}/"
+                  icon=${group.is_dynamic ? 'atom' : 'users'}
+                  clickable
+                  light
+                  shadow
+                >
+                  ${group.name}
+                </temba-label>
+              `;
+            })}
+          </div>
+        `
+      : null}`;
+  }
+}

package/src/contacts/ContactName.ts

@@ -0,0 +1,37 @@
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { ContactStoreElement } from './ContactStoreElement';
+
+export class ContactName 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) {
+      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>
+      `;
+    }
+  }
+}

package/src/contacts/ContactStoreElement.ts

@@ -0,0 +1,51 @@
+import { PropertyValueMap } from 'lit';
+import { property } from 'lit/decorators';
+import { Contact, Group } from '../interfaces';
+import { StoreElement } from '../store/StoreElement';
+
+export class ContactStoreElement extends StoreElement {
+  @property({ type: String })
+  contact: string;
+
+  @property({ type: Object, attribute: false })
+  data: Contact;
+
+  prepareData(data: any) {
+    if (data && data.length > 0) {
+      data = data[0];
+      data.groups.forEach((group: Group) => {
+        group.is_dynamic = this.store.isDynamicGroup(group.uuid);
+      });
+
+      data.groups.sort((a: Group, b: Group) => {
+        if (!a.is_dynamic || !b.is_dynamic) {
+          if (a.is_dynamic) {
+            return -1;
+          }
+
+          if (b.is_dynamic) {
+            return 1;
+          }
+        }
+
+        return a.name.localeCompare(b.name);
+      });
+
+      return data;
+    }
+    return null;
+  }
+
+  protected updated(
+    changes: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.updated(changes);
+    if (changes.has('contact')) {
+      if (this.contact) {
+        this.url = `/api/v2/contacts.json?uuid=${this.contact}`;
+      } else {
+        this.url = null;
+      }
+    }
+  }
+}

package/src/contacts/ContactUrn.ts

@@ -0,0 +1,38 @@
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators';
+import { RapidElement } from '../RapidElement';
+
+export class ContactUrn extends RapidElement {
+  @property({ type: String })
+  urn: string;
+
+  @property({ type: Number })
+  size: number;
+
+  static get styles() {
+    return css`
+      .urn {
+        box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.04) inset;
+        padding: 3px;
+        border: 1px solid #ddd;
+        border-radius: 18rem;
+        background: #eee;
+        margin-right: 0.2em;
+      }
+    `;
+  }
+
+  public render(): TemplateResult {
+    const scheme = this.urn.split(':')[0];
+    return html`
+      <img
+        class="urn"
+        width="${this.size}em"
+        height="${this.size}em"
+        src="${this.prefix ||
+        (window as any).static_url ||
+        '/static/'}img/schemes/${scheme}.svg"
+      />
+    `;
+  }
+}