@verdocs/web-sdk 2.3.87 → 4.0.5

package/dist/collection/components/controls/verdocs-floating-menu/verdocs-floating-menu.js

@@ -1,31 +1,31 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 const getTop = (el) => el.offsetTop + (el.parentElement && getTop(el.parentElement));
 const getLeft = (el) => el.offsetLeft + (el.parentElement && getLeft(el.parentElement));
 // @see https://stackoverflow.com/a/49186677/1812436
 const getScrollParent = node => {
-  const regex = /(auto|scroll)/;
-  const parents = (_node, ps) => {
-    if (_node.parentNode === null) {
-      return ps;
-    }
-    return parents(_node.parentNode, ps.concat([_node]));
-  };
-  const style = (_node, prop) => getComputedStyle(_node, null).getPropertyValue(prop);
-  const overflow = _node => style(_node, 'overflow') + style(_node, 'overflow-y') + style(_node, 'overflow-x');
-  const scroll = _node => regex.test(overflow(_node));
-  const scrollParent = _node => {
-    if (!(_node instanceof HTMLElement || _node instanceof SVGElement)) {
-      return;
-    }
-    const ps = parents(_node.parentNode, []);
-    for (let i = 0; i < ps.length; i += 1) {
-      if (scroll(ps[i])) {
-        return ps[i];
-      }
-    }
-    return document.scrollingElement || document.documentElement;
-  };
-  return scrollParent(node);
+    const regex = /(auto|scroll)/;
+    const parents = (_node, ps) => {
+        if (_node.parentNode === null) {
+            return ps;
+        }
+        return parents(_node.parentNode, ps.concat([_node]));
+    };
+    const style = (_node, prop) => getComputedStyle(_node, null).getPropertyValue(prop);
+    const overflow = _node => style(_node, 'overflow') + style(_node, 'overflow-y') + style(_node, 'overflow-x');
+    const scroll = _node => regex.test(overflow(_node));
+    const scrollParent = _node => {
+        if (!(_node instanceof HTMLElement || _node instanceof SVGElement)) {
+            return;
+        }
+        const ps = parents(_node.parentNode, []);
+        for (let i = 0; i < ps.length; i += 1) {
+            if (scroll(ps[i])) {
+                return ps[i];
+            }
+        }
+        return document.scrollingElement || document.documentElement;
+    };
+    return scrollParent(node);
 };
 /**
  * Floating Action Button style menu. For proper placement, this should be added to the DOM inside a container that is set to
@@ -33,126 +33,130 @@ const getScrollParent = node => {
  * container. It will be absolutely positioned so it will be unaffected by scrolling the container.
  */
 export class VerdocsFloatingMenu {
-  constructor() {
-    this.menuContainer = null;
-    this.scrollParent = null;
-    this.scrollParentParent = null;
-    this.options = [];
-  }
-  componentDidLoad() {
-    this.menuContainer = document.createElement('div');
-    this.menuContainer.id = 'verdocs-floating-menu';
-    let el = document.createElement('div');
-    el.className = 'trigger';
-    el.innerText = '+';
-    this.menuContainer.append(el);
-    el = document.createElement('div');
-    el.className = 'options';
-    this.menuContainer.append(el);
-    const localhandleSelect = this.handleSelect.bind(this);
-    this.options.forEach(option => {
-      const childEl = document.createElement('div');
-      childEl.className = 'option';
-      childEl.addEventListener('click', () => localhandleSelect(option));
-      el.append(childEl);
-      const iconEl = document.createElement('verdocs-toolbar-icon');
-      iconEl.setAttribute('icon', option.icon);
-      iconEl.setAttribute('text', option.tooltip);
-      iconEl.setAttribute('placement', 'left');
-      childEl.append(iconEl);
-    });
-    document.body.append(this.menuContainer);
-    this.scrollParent = getScrollParent(this.el);
-    if (this.scrollParent) {
-      this.scrollParentParent = this.scrollParent.parentElement;
-      this.repositionTrigger(this.scrollParent);
+    constructor() {
+        this.menuContainer = null;
+        this.scrollParent = null;
+        this.scrollParentParent = null;
+        this.options = [];
     }
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.menuContainer) === null || _a === void 0 ? void 0 : _a.remove();
-  }
-  handleSelect(option) {
-    var _a;
-    (_a = this.optionSelected) === null || _a === void 0 ? void 0 : _a.emit(option);
-    const el = document.getElementById('verdocs-floating-menu');
-    if (el) {
-      el.className = 'force-closed';
-      setTimeout(() => {
-        el.className = '';
-      }, 100);
+    componentDidLoad() {
+        this.menuContainer = document.createElement('div');
+        this.menuContainer.id = 'verdocs-floating-menu';
+        let el = document.createElement('div');
+        el.className = 'trigger';
+        el.innerText = '+';
+        this.menuContainer.append(el);
+        el = document.createElement('div');
+        el.className = 'options';
+        this.menuContainer.append(el);
+        const localhandleSelect = this.handleSelect.bind(this);
+        this.options.forEach(option => {
+            const childEl = document.createElement('div');
+            childEl.className = 'option';
+            childEl.addEventListener('click', () => localhandleSelect(option));
+            el.append(childEl);
+            const iconEl = document.createElement('verdocs-toolbar-icon');
+            iconEl.setAttribute('icon', option.icon);
+            iconEl.setAttribute('text', option.tooltip);
+            iconEl.setAttribute('placement', 'left');
+            childEl.append(iconEl);
+        });
+        document.body.append(this.menuContainer);
+        this.scrollParent = getScrollParent(this.el);
+        if (this.scrollParent) {
+            this.scrollParentParent = this.scrollParent.parentElement;
+            this.repositionTrigger(this.scrollParent);
+        }
     }
-  }
-  repositionTrigger(scrollParent) {
-    const scrollParentParent = scrollParent.parentElement;
-    if (scrollParentParent) {
-      const bounds = scrollParentParent.getBoundingClientRect();
-      const menu = document.getElementById('verdocs-floating-menu');
-      if (menu) {
-        menu.style.bottom = `${document.documentElement.clientHeight - (document.documentElement.scrollTop + bounds.bottom) + 10}px`;
-        menu.style.left = `${bounds.right - 80}px`;
-      }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.menuContainer) === null || _a === void 0 ? void 0 : _a.remove();
     }
-  }
-  render() {
-    return h(Host, null);
-  }
-  static get is() { return "verdocs-floating-menu"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["verdocs-floating-menu.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["verdocs-floating-menu.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "options": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "IOption[]",
-          "resolved": "IOption[]",
-          "references": {
-            "IOption": {
-              "location": "local"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The role that this contact will be assigned to."
-        },
-        "defaultValue": "[]"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "optionSelected",
-        "name": "optionSelected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when a menu option is clicked.\nWeb Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks."
-        },
-        "complexType": {
-          "original": "IOption",
-          "resolved": "IOption",
-          "references": {
-            "IOption": {
-              "location": "local"
+    handleSelect(option) {
+        var _a;
+        (_a = this.optionSelected) === null || _a === void 0 ? void 0 : _a.emit(option);
+        const el = document.getElementById('verdocs-floating-menu');
+        if (el) {
+            el.className = 'force-closed';
+            setTimeout(() => {
+                el.className = '';
+            }, 100);
+        }
+    }
+    repositionTrigger(scrollParent) {
+        const scrollParentParent = scrollParent.parentElement;
+        if (scrollParentParent) {
+            const bounds = scrollParentParent.getBoundingClientRect();
+            const menu = document.getElementById('verdocs-floating-menu');
+            if (menu) {
+                menu.style.bottom = `${document.documentElement.clientHeight - (document.documentElement.scrollTop + bounds.bottom) + 10}px`;
+                menu.style.left = `${bounds.right - 80}px`;
             }
-          }
         }
-      }];
-  }
-  static get elementRef() { return "el"; }
+    }
+    render() {
+        return h(Host, { key: 'f86d62b15f087709d2f167a3c24cc769fb191c26' });
+    }
+    static get is() { return "verdocs-floating-menu"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-floating-menu.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-floating-menu.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IOption[]",
+                    "resolved": "IOption[]",
+                    "references": {
+                        "IOption": {
+                            "location": "local",
+                            "path": "/Users/chad/projects/verdocs/web-sdk/verdocs-web-sdk/src/components/controls/verdocs-floating-menu/verdocs-floating-menu.tsx",
+                            "id": "src/components/controls/verdocs-floating-menu/verdocs-floating-menu.tsx::IOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The role that this contact will be assigned to."
+                },
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "optionSelected",
+                "name": "optionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event fired when a menu option is clicked.\nWeb Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks."
+                },
+                "complexType": {
+                    "original": "IOption",
+                    "resolved": "IOption",
+                    "references": {
+                        "IOption": {
+                            "location": "local",
+                            "path": "/Users/chad/projects/verdocs/web-sdk/verdocs-web-sdk/src/components/controls/verdocs-floating-menu/verdocs-floating-menu.tsx",
+                            "id": "src/components/controls/verdocs-floating-menu/verdocs-floating-menu.tsx::IOption"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/controls/verdocs-help-icon/verdocs-help-icon.js

@@ -1,93 +1,93 @@
-import { createPopper } from '@popperjs/core';
-import { h, Host } from '@stencil/core';
+import { createPopper } from "@popperjs/core";
+import { h, Host } from "@stencil/core";
 const helpIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="#5c6575"><path d="M11.925 18q.55 0 .938-.387.387-.388.387-.938 0-.55-.387-.925-.388-.375-.938-.375-.55 0-.925.375t-.375.925q0 .55.375.938.375.387.925.387Zm-.95-3.85h1.95q0-.8.2-1.287.2-.488 1.025-1.288.65-.625 1.025-1.213.375-.587.375-1.437 0-1.425-1.025-2.175Q13.5 6 12.1 6q-1.425 0-2.35.775t-1.275 1.85l1.775.7q.125-.45.55-.975.425-.525 1.275-.525.725 0 1.1.412.375.413.375.888 0 .475-.287.9-.288.425-.713.775-1.075.95-1.325 1.475-.25.525-.25 1.875ZM12 22.2q-2.125 0-3.988-.8-1.862-.8-3.237-2.175Q3.4 17.85 2.6 15.988 1.8 14.125 1.8 12t.8-3.988q.8-1.862 2.175-3.237Q6.15 3.4 8.012 2.6 9.875 1.8 12 1.8t3.988.8q1.862.8 3.237 2.175Q20.6 6.15 21.4 8.012q.8 1.863.8 3.988t-.8 3.988q-.8 1.862-2.175 3.237Q17.85 20.6 15.988 21.4q-1.863.8-3.988.8Zm0-2.275q3.325 0 5.625-2.3t2.3-5.625q0-3.325-2.3-5.625T12 4.075q-3.325 0-5.625 2.3T4.075 12q0 3.325 2.3 5.625t5.625 2.3ZM12 12Z"/></svg>';
 /**
  * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
  */
 export class VerdocsHelpIcon {
-  constructor() {
-    this.text = '';
-    this.icon = helpIcon;
-    this.containerId = `verdocs-help-icon-${Math.random().toString(36).substring(2, 11)}`;
-  }
-  componentDidLoad() {
-    this.popperInstance = createPopper(this.iconEl, this.tooltipEl, {
-    // placement: 'top-end',
-    // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
-    });
-  }
-  disconnectedCallback() {
-    if (this.popperInstance) {
-      this.popperInstance.destroy();
-      this.popperInstance = null;
+    constructor() {
+        this.text = '';
+        this.icon = helpIcon;
+        this.containerId = `verdocs-help-icon-${Math.random().toString(36).substring(2, 11)}`;
+    }
+    componentDidLoad() {
+        this.popperInstance = createPopper(this.iconEl, this.tooltipEl, {
+        // placement: 'top-end',
+        // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],
+        });
+    }
+    disconnectedCallback() {
+        if (this.popperInstance) {
+            this.popperInstance.destroy();
+            this.popperInstance = null;
+        }
+    }
+    show() {
+        var _a, _b;
+        (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
+        (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
+    }
+    hide() {
+        var _a;
+        (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
+    }
+    render() {
+        return (h(Host, { key: '4efe69ab5b8edeffe892fbce06d31dddf3c17e6b', class: {} }, h("div", { key: '05917e2f774970456b6c56a528fbdfe5b1a95586', "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { key: '25c6b233a2e8dc60425d27611d0f9ea1b8804a90', id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltipEl = el) }, h("span", { key: '5ae3b1fce0724c421dc13c4439e79a9e88e4b40a', innerHTML: this.text }), h("div", { key: '136ce3de3ec515328f8b47fb35c052aad6e4e223', "data-popper-arrow": "true", class: "arrow" }))));
+    }
+    static get is() { return "verdocs-help-icon"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-help-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-help-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Help text to display on hover/focus"
+                },
+                "attribute": "text",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon to display. If not supplied, a standard help icon will be shown."
+                },
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "helpIcon"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "containerId": {}
+        };
     }
-  }
-  show() {
-    var _a, _b;
-    (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.setAttribute('data-show', '');
-    (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update().catch(() => { });
-  }
-  hide() {
-    var _a;
-    (_a = this.tooltipEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
-  }
-  render() {
-    return (h(Host, { class: {} }, h("div", { "aria-describedby": this.containerId, class: "icon", innerHTML: this.icon, onMouseEnter: () => this.show(), onFocus: () => this.show(), onMouseLeave: () => this.hide(), onBlur: () => this.hide(), ref: el => (this.iconEl = el) }), h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltipEl = el) }, h("span", { innerHTML: this.text }), h("div", { "data-popper-arrow": "true", class: "arrow" }))));
-  }
-  static get is() { return "verdocs-help-icon"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["verdocs-help-icon.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["verdocs-help-icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Help text to display on hover/focus"
-        },
-        "attribute": "text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Optional icon to display. If not supplied, a standard help icon will be shown."
-        },
-        "attribute": "icon",
-        "reflect": false,
-        "defaultValue": "helpIcon"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "containerId": {}
-    };
-  }
 }

package/dist/collection/components/controls/verdocs-loader/verdocs-loader.js

@@ -1,20 +1,20 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 /**
  * Animated loader placeholder. There are currently no configuration options for this control.
  */
 export class VerdocsLoader {
-  render() {
-    return h(Host, null);
-  }
-  static get is() { return "verdocs-loader"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["verdocs-loader.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["verdocs-loader.css"]
-    };
-  }
+    render() {
+        return h(Host, { key: '763614c6e09e0271d2de5a1a35af44a19063919b' });
+    }
+    static get is() { return "verdocs-loader"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["verdocs-loader.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["verdocs-loader.css"]
+        };
+    }
 }

package/dist/collection/components/controls/verdocs-organization-card/test/org-popup.e2e.js

@@ -0,0 +1,34 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('org-popup', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<org-popup></org-popup>');
+        const element = await page.find('org-popup');
+        expect(element).toHaveClass('hydrated');
+    });
+    it('renders changes to the name data', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<org-popup></org-popup>');
+        const component = await page.find('org-popup');
+        const element = await page.find('org-popup >>> div');
+        component.setProperty('organization', { name: 'Test' });
+        await page.waitForChanges();
+        expect(element.textContent).toEqual(`Test`);
+    });
+});
+// describe('dropdown-menu', () => {
+//   it('renders a placeholder with no options', async () => {
+//     const page = await newE2EPage();
+//     await page.setContent('<dropdown-menu></dropdown-menu>');
+//     await page.compareScreenshot('Closed', {fullPage: false});
+//   });
+//   it('renders changes to the name data', async () => {
+//     const page = await newE2EPage();
+//     await page.setContent('<dropdown-menu open></dropdown-menu>');
+//     const component = await page.find('dropdown-menu');
+//     component.setProperty('options', [{label: 'Test 1'}, {label: 'Test Disabled', disabled: true}, {label: 'Test 2'}]);
+//     await page.waitForChanges();
+//     const results = await page.compareScreenshot('Opened', {fullPage: false});
+//     expect(results).toMatchScreenshot({allowableMismatchedRatio: 0.05});
+//   });
+// });

package/dist/collection/components/controls/verdocs-organization-card/test/org-popup.spec.js

@@ -0,0 +1,64 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { VerdocsOrganizationCard } from "../verdocs-organization-card";
+describe('verdocs-organization-card', () => {
+    it('renders', async () => {
+        const { root } = await newSpecPage({
+            components: [VerdocsOrganizationCard],
+            html: '<verdocs-organization-card></verdocs-organization-card>',
+        });
+        expect(root).toEqualHtml(`
+      <verdocs-organization-card>
+        <mock:shadow-root>
+          <div class="container">
+            <span class="icon"></span>
+            <span class="content"></span>
+            <div class="popup">
+              <div class="popup-header">
+                <span class="status"></span>
+                <span class="title"></span>
+              </div>
+              <div class="popup-body">
+                <span class="joined"><b>Joined</b></span>
+                <span class="followers"><b>Followers</b></span>
+                <span class="website"><b>Website</b></span>
+                <span class="templates"><b>Templates</b></span>
+                <span></span>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </verdocs-organization-card>
+    `);
+    });
+    it('renders with values', async () => {
+        const { root } = await newSpecPage({
+            components: [VerdocsOrganizationCard],
+            html: `<verdocs-organization-card organization={{ name: 'Acme Organization', created_at: '2014', followers: '123', website: 'www.acmeorganization.com', templates: '9' }}/>`,
+        });
+        expect(root).toEqualHtml(`
+      <verdocs-organization-card organization={{ name: "Test" }}>
+        <mock:shadow-root>
+          <div class="container">
+            <span class="icon">
+              <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#ffffff"><rect fill="none" height="24" width="24"></rect><g><path d="M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z"></path></g></svg>
+            </span>
+            <span class="content">Acme Organization</span>
+            <div class="popup">
+              <div class="popup-header">
+                <span class="status"></span>
+                <span class="title">Acme Organization</span>
+              </div>
+              <div class="popup-body">
+                <span class="joined"><b>Joined</b> 2014</span>
+                <span class="followers"><b>Followers</b> 123</span>
+                <span class="website"><b>Website</b></span>
+                <span class="templates"><b>Templates</b> 9</span>
+                <span>www.acmeorganization.com</span>
+              </div>
+            </div>
+          </div>
+        </mock:shadow-root>
+      </verdocs-organization-card>
+    `);
+    });
+});