@verdocs/web-sdk 1.9.6 → 1.9.10

package/dist/collection/components/controls/verdocs-checkbox/verdocs-checkbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-checkbox/verdocs-checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,SAAS,EAAE,kBAAkB;EAC7B,IAAI,EAAE;IACJ,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,KAAK;GAChB;EACD,QAAQ,EAAE,EAAE;CACL,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA,+BAA+B,OAAO,UAAU,IAAI,WAAW,KAAK,cAAc,QAAQ,MAAM,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Controls/Checkbox',\n  component: 'verdocs-checkbox',\n  args: {\n    checked: false,\n    name: 'test',\n    value: '1',\n    disabled: false,\n  },\n  argTypes: {},\n} as Meta;\n\nexport const Checkbox = ({checked, name, value, disabled}) => html` <verdocs-checkbox .checked=${checked} .name=${name} .value=${value} .disabled=${disabled} /> `;\n"]}
+{"version":3,"file":"verdocs-checkbox.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-checkbox/verdocs-checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,SAAS,EAAE,kBAAkB;EAC7B,IAAI,EAAE;IACJ,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,KAAK;GAChB;EACD,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,MAAM,EAAE,OAAO;MACf,WAAW,EAAE,0GAA0G;KACxH;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAC,EAAE,EAAE,CACpE,IAAI,CAAA,+BAA+B,OAAO,UAAU,IAAI,WAAW,KAAK,cAAc,QAAQ,WAAW,OAAO,MAAM,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Controls/Checkbox',\n  component: 'verdocs-checkbox',\n  args: {\n    checked: false,\n    name: 'test',\n    value: '1',\n    disabled: false,\n  },\n  argTypes: {\n    onInput: {\n      action: 'input',\n      description: 'Fired when the checkbox is clicked. e.target.checked will indicate the current status (true if checked).',\n    },\n  },\n} as Meta;\n\nexport const Checkbox = ({checked, name, value, disabled, onInput}) =>\n  html` <verdocs-checkbox .checked=${checked} .name=${name} .value=${value} .disabled=${disabled} @input=${onInput} /> `;\n"]}

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

@@ -5,22 +5,31 @@ import SortDown from './down-arrow.svg';
 /**
  * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden
  * when the button is pressed again, or an option is selected.
+ *
+ * ```html
+ * <verdocs-dropdown
+ *   options={[
+ *     {label: 'Option 1', disabled: true},
+ *     {label: 'Option 2', id: '2'}
+*    ]}
+ *   label="OK" onClick={() => (console.log('OK clicked'))}
+ * />
+ * ```
  */
 export class VerdocsDropdown {
   constructor() {
     this.options = [];
-    this.open = undefined;
     this.isOpen = undefined;
   }
   componentWillLoad() {
-    this.isOpen = !!this.open;
+    // this.isOpen = !!this.open;
   }
   componentDidLoad() {
     this.popper = createPopper(this.dropdownButton, this.dropdownMenu, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 6] } }] });
   }
   handleSelectOption(e, option) {
     e.stopPropagation();
-    this.isOpen = false;
+    // this.isOpen = false;
     this.optionSelected.emit(option);
     this.hide();
   }
@@ -28,7 +37,7 @@ export class VerdocsDropdown {
   // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists
   showDropdown() {
     var _a, _b;
-    this.isOpen = true;
+    // this.isOpen = true;
     this.dropdownMenu.setAttribute('data-show', '');
     this.dropdownMenu.removeAttribute('aria-hidden');
     (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions(options => ({
@@ -66,7 +75,7 @@ export class VerdocsDropdown {
   }
   render() {
     var _a;
-    return (h(Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), open: !!this.isOpen } }, h("button", { class: "arrow", innerHTML: SortDown, "aria-label": "Open Menu", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), h("div", { class: "items", "aria-hidden": !this.open, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("button", { onClick: e => this.handleSelectOption(e, option), class: "option", disabled: option.disabled }, option.label))))));
+    return (h(Host, { class: { storybook: !!(window === null || window === void 0 ? void 0 : window['STORYBOOK_ENV']), open: !!this.isOpen } }, h("button", { class: "arrow", innerHTML: SortDown, "aria-label": "Open Menu", onClick: e => this.toggleDropdown(e), onBlur: e => this.handleHideDropdown(e), ref: el => (this.dropdownButton = el) }), h("div", { class: "items", "aria-hidden": !this.isOpen, ref: el => (this.dropdownMenu = el) }, (_a = this.options) === null || _a === void 0 ? void 0 : _a.map(option => (h("button", { onClick: e => this.handleSelectOption(e, option), class: "option", disabled: option.disabled }, option.label))))));
   }
   static get is() { return "verdocs-dropdown"; }
   static get originalStyleUrls() {
@@ -100,23 +109,6 @@ export class VerdocsDropdown {
           "text": "The menu options to display."
         },
         "defaultValue": "[]"
-      },
-      "open": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If set, the component will be open by default. This is primarily intended to be used for testing."
-        },
-        "attribute": "open",
-        "reflect": false
       }
     };
   }

package/dist/collection/components/controls/verdocs-dropdown/verdocs-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-dropdown.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,EAAC,YAAY,EAAW,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAe,MAAM,eAAe,CAAC;AAC7E,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AASxC;;;GAGG;AAKH,MAAM,OAAO,eAAe;;mBAQO,EAAE;;;;EAkBnC,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;EAC5B,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,YAAY,EAAE,EAAC,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAC,EAAC,CAAC,EAAC,CAAC,CAAC;EAC5J,CAAC;EAED,kBAAkB,CAAC,CAAM,EAAE,MAAmB;IAC5C,CAAC,CAAC,eAAe,EAAE,CAAC;IACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,IAAI,EAAE,CAAC;EACd,CAAC;EAED,8CAA8C;EAC9C,8GAA8G;EAC9G,YAAY;;IACV,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAChD,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAA,IAAI,CAAC,MAAM,0CAAE,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;MAClC,GAAG,OAAO;MACV,SAAS,EAAE,CAAC,GAAG,OAAO,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;KAC3E,CAAC,CAAC,CAAC;IAEJ,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAC;EACxB,CAAC;EAED,kBAAkB,CAAC,CAAM;;IACvB,IAAI,CAAA,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,0CAAE,SAAS,MAAK,QAAQ,IAAI,CAAA,MAAA,CAAC,aAAD,CAAC,uBAAD,CAAC,CAAE,MAAM,0CAAE,SAAS,MAAK,OAAO,EAAE;MACzE,+FAA+F;MAC/F,OAAO;KACR;IAED,IAAI,CAAC,IAAI,EAAE,CAAC;EACd,CAAC;EAED,cAAc,CAAC,CAAM;IACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;SAAM;MACL,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;EACH,CAAC;EAED,IAAI;;IACF,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACpB,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAC/C,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IACtD,MAAA,IAAI,CAAC,MAAM,0CAAE,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;MAClC,GAAG,OAAO;MACV,SAAS,EAAE,CAAC,GAAG,OAAO,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,KAAK,EAAC,CAAC;KAC5E,CAAC,CAAC,CAAC;EACN,CAAC;EAED,MAAM;;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,SAAS,EAAE,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,eAAe,CAAC,CAAA,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAC;MACxE,cACE,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,QAAQ,gBACR,WAAW,EACtB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EACpC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EACvC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAuB,CAAC,GAC1D;MAEF,WAAK,KAAK,EAAC,OAAO,iBAAc,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAoB,CAAC,IAC9F,MAAA,IAAI,CAAC,OAAO,0CAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC3B,cAAQ,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,EAAE,MAAM,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,IAC/F,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACE,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport SortDown from './down-arrow.svg';\n\nexport interface IMenuOption {\n  label: string;\n  id?: any;\n  faIcon?: any;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected.\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  private dropdownButton?: HTMLButtonElement;\n  private dropdownMenu?: HTMLDivElement;\n  private popper?: Instance;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\n\n  /**\n   * If set, the component will be open by default. This is primarily intended to be used for testing.\n   */\n  @Prop() open: boolean;\n\n  /**\n   * If set, the component will be open by default.\n   */\n  @State() isOpen: boolean;\n\n  /**\n   * Event fired when a menu option is clicked.\n   * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n   */\n  @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n  componentWillLoad() {\n    this.isOpen = !!this.open;\n  }\n\n  componentDidLoad() {\n    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n  }\n\n  handleSelectOption(e: any, option: IMenuOption) {\n    e.stopPropagation();\n    this.isOpen = false;\n    this.optionSelected.emit(option);\n    this.hide();\n  }\n\n  // See https://popper.js.org/docs/v2/tutorial/\n  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists\n  showDropdown() {\n    this.isOpen = true;\n    this.dropdownMenu.setAttribute('data-show', '');\n    this.dropdownMenu.removeAttribute('aria-hidden');\n\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n    }));\n\n    this.popper?.update();\n  }\n\n  handleHideDropdown(e: any) {\n    if (e?.target?.localName === 'button' && e?.target?.className === 'arrow') {\n      // This event is fired when a menu element is clicked because the button \"loses focus\" then too\n      return;\n    }\n\n    this.hide();\n  }\n\n  toggleDropdown(e: any) {\n    e.stopPropagation();\n\n    if (this.isOpen) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.isOpen = false;\n    this.dropdownMenu.removeAttribute('data-show');\n    this.dropdownMenu.setAttribute('aria-hidden', 'true');\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n    }));\n  }\n\n  render() {\n    return (\n      <Host class={{storybook: !!window?.['STORYBOOK_ENV'], open: !!this.isOpen}}>\n        <button\n          class=\"arrow\"\n          innerHTML={SortDown}\n          aria-label=\"Open Menu\"\n          onClick={e => this.toggleDropdown(e)}\n          onBlur={e => this.handleHideDropdown(e)}\n          ref={el => (this.dropdownButton = el as HTMLButtonElement)}\n        />\n\n        <div class=\"items\" aria-hidden={!this.open} ref={el => (this.dropdownMenu = el as HTMLDivElement)}>\n          {this.options?.map(option => (\n            <button onClick={e => this.handleSelectOption(e, option)} class=\"option\" disabled={option.disabled}>\n              {option.label}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-dropdown.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-dropdown/verdocs-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, State, h, Event, EventEmitter} from '@stencil/core';\nimport SortDown from './down-arrow.svg';\n\nexport interface IMenuOption {\n  label: string;\n  id?: any;\n  faIcon?: any;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu button. A menu of the specified options will be displayed when the button is pressed. The menu will be hidden\n * when the button is pressed again, or an option is selected.\n *\n * ```html\n * <verdocs-dropdown\n *   options={[\n *     {label: 'Option 1', disabled: true},\n *     {label: 'Option 2', id: '2'}\n*    ]}\n *   label=\"OK\" onClick={() => (console.log('OK clicked'))}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-dropdown',\n  styleUrl: 'verdocs-dropdown.scss',\n})\nexport class VerdocsDropdown {\n  private dropdownButton?: HTMLButtonElement;\n  private dropdownMenu?: HTMLDivElement;\n  private popper?: Instance;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IMenuOption[] = [];\n\n  /**\n   * If set, the component will be open by default. This is primarily intended to be used for testing.\n   */\n  // @Prop() open: boolean;\n\n  /**\n   * If set, the component will be open by default.\n   */\n  @State() isOpen: boolean;\n\n  /**\n   * Event fired when a menu option is clicked.\n   * Web Component events need to be \"composed\" to cross the Shadow DOM and be received by parent frameworks.\n   */\n  @Event({composed: true}) optionSelected: EventEmitter<IMenuOption>;\n\n  componentWillLoad() {\n    // this.isOpen = !!this.open;\n  }\n\n  componentDidLoad() {\n    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [0, 6]}}]});\n  }\n\n  handleSelectOption(e: any, option: IMenuOption) {\n    e.stopPropagation();\n    // this.isOpen = false;\n    this.optionSelected.emit(option);\n    this.hide();\n  }\n\n  // See https://popper.js.org/docs/v2/tutorial/\n  // What we're doing here is clearing event listeners when they aren't needed, to increase performance in lists\n  showDropdown() {\n    // this.isOpen = true;\n    this.dropdownMenu.setAttribute('data-show', '');\n    this.dropdownMenu.removeAttribute('aria-hidden');\n\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n    }));\n\n    this.popper?.update();\n  }\n\n  handleHideDropdown(e: any) {\n    if (e?.target?.localName === 'button' && e?.target?.className === 'arrow') {\n      // This event is fired when a menu element is clicked because the button \"loses focus\" then too\n      return;\n    }\n\n    this.hide();\n  }\n\n  toggleDropdown(e: any) {\n    e.stopPropagation();\n\n    if (this.isOpen) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.isOpen = false;\n    this.dropdownMenu.removeAttribute('data-show');\n    this.dropdownMenu.setAttribute('aria-hidden', 'true');\n    this.popper?.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n    }));\n  }\n\n  render() {\n    return (\n      <Host class={{storybook: !!window?.['STORYBOOK_ENV'], open: !!this.isOpen}}>\n        <button\n          class=\"arrow\"\n          innerHTML={SortDown}\n          aria-label=\"Open Menu\"\n          onClick={e => this.toggleDropdown(e)}\n          onBlur={e => this.handleHideDropdown(e)}\n          ref={el => (this.dropdownButton = el as HTMLButtonElement)}\n        />\n\n        <div class=\"items\" aria-hidden={!this.isOpen} ref={el => (this.dropdownMenu = el as HTMLDivElement)}>\n          {this.options?.map(option => (\n            <button onClick={e => this.handleSelectOption(e, option)} class=\"option\" disabled={option.disabled}>\n              {option.label}\n            </button>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.css

@@ -1,9 +1,13 @@
 verdocs-organization-card {
   font-family: "Barlow", sans-serif;
-  width: 242px;
   position: relative;
   display: flex;
   flex-direction: row;
+  align-items: center;
+  border: 1px solid #cccccc;
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 7px 15px;
 }
 verdocs-organization-card:hover > .popup {
   display: flex;
@@ -12,59 +16,64 @@ verdocs-organization-card:hover > .popup {
 }
 verdocs-organization-card .icon {
   flex: 0;
-  margin: 0 7px 0 0;
+  height: 24px;
+  width: 24px;
+  margin: 0 14px 0 0;
 }
 verdocs-organization-card .icon svg {
   fill: #aeb4bf;
+  height: 24px;
   width: 24px;
-  margin-bottom: -5px;
+}
+verdocs-organization-card .content {
+  margin-top: 2px;
 }
 verdocs-organization-card .popup {
   position: absolute;
   top: -1px;
   left: -4px;
   display: none;
-  border: 1px solid #1e2031;
+  border: 1px solid #cccccc;
   border-radius: 10px;
   width: 326px;
-  height: 220px;
+  padding: 20px 40px 0 40px;
   flex-direction: column;
   flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-evenly;
   font-family: sans-serif;
 }
 verdocs-organization-card .popup-header {
   display: flex;
+  flex: 0;
   flex-direction: row;
-  align-items: center;
-  width: 242px;
-  height: 69px;
-  justify-content: space-between;
+  align-items: flex-end;
+  margin: 0 0 20px 0;
   font-size: 21px;
+  line-height: 16px;
   color: #4c56cb;
 }
+verdocs-organization-card .popup-header .status {
+  margin-right: 20px;
+}
 verdocs-organization-card .popup-body {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  width: 256.2px;
-  height: 95px;
-  justify-content: space-evenly;
-  font-size: 13px;
+  flex-direction: column;
+  font-size: 14px;
   text-transform: uppercase;
 }
-verdocs-organization-card .popup-body span {
-  display: block;
-  flex: 2 80px;
-  margin-left: 7px;
+verdocs-organization-card .status {
+  transform: scale(1.5);
+  width: 24px;
+  height: 24px;
 }
-verdocs-organization-card .popup-body span:last-child {
-  margin-top: 5px;
+verdocs-organization-card .field {
+  margin: 0 0 20px 0;
 }
-verdocs-organization-card .status {
-  width: 29px;
-  height: 29px;
-  background-color: #aeb4bf;
-  border-radius: 50%;
+verdocs-organization-card .field strong {
+  color: #7b7b9a;
+  display: block;
+  margin: 0 0 5px 0;
+}
+verdocs-organization-card .field a {
+  color: #654dcb;
+  text-transform: uppercase;
 }

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.js

@@ -1,15 +1,16 @@
+import { format } from 'date-fns';
 import { h, Host } from '@stencil/core';
-import UserGroup from './user-group.svg';
+const UserIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><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"/></g></svg>';
+const BusinessIcon = '<svg xmlns="http://www.w3.org/2000/svg"  focusable="false" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path></svg>';
 /**
- * Display a pop-up describing the company that was hovered over
+ * Display a small summary card describing an organization
  */
 export class VerdocsOrganizationCard {
   constructor() {
     this.organization = undefined;
   }
   render() {
-    console.log('org', JSON.stringify(this.organization, null, 2));
-    return (h(Host, null, h("span", { class: "icon", innerHTML: UserGroup }), h("span", { class: "content" }, this.organization.name), h("div", { class: "popup" }, h("div", { class: "popup-header" }, h("span", { class: "status" }), h("span", { class: "title" }, this.organization.name)), h("div", { class: "popup-body" }, h("span", { class: "joined" }, h("b", null, "Joined"), " ", 'Jan 1 2022'), h("span", { class: "followers" }, h("b", null, "Followers"), " 57"), h("span", { class: "website" }, h("b", null, "Website")), h("span", { class: "templates" }, h("b", null, "Templates"), " 7"), h("span", null, "https://www.google.com")))));
+    return (h(Host, null, h("span", { class: "icon", innerHTML: this.organization.is_business ? BusinessIcon : UserIcon }), h("span", { class: "content" }, this.organization.name), h("div", { class: "popup" }, h("div", { class: "popup-header" }, h("span", { class: "status" }, h("span", { class: "icon", innerHTML: this.organization.is_business ? BusinessIcon : UserIcon })), h("span", { class: "title" }, this.organization.name)), h("div", { class: "popup-body" }, h("div", { class: "field" }, h("strong", null, "Joined"), format(new Date(this.organization.created_at || undefined), 'LLL d, Y')), this.organization.url && (h("div", { class: "field" }, h("strong", null, "Website"), h("a", { href: this.organization.url, target: "_blank", rel: "nofollow" }, this.organization.url)))))));
   }
   static get is() { return "verdocs-organization-card"; }
   static get originalStyleUrls() {

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-organization-card.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-organization-card/verdocs-organization-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAEvD,OAAO,SAAS,MAAM,kBAAkB,CAAC;AAEzC;;GAEG;AAKH,MAAM,OAAO,uBAAuB;;;;EAMlC,MAAM;IACJ,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;IAC/D,OAAO,CACL,EAAC,IAAI;MACH,YAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,SAAS,GAAI;MAE3C,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAQ;MAErD,WAAK,KAAK,EAAC,OAAO;QAChB,WAAK,KAAK,EAAC,cAAc;UACvB,YAAM,KAAK,EAAC,QAAQ,GAAG;UACvB,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAQ,CAC/C;QACN,WAAK,KAAK,EAAC,YAAY;UACrB,YAAM,KAAK,EAAC,QAAQ;YAClB,sBAAa;;YAAE,YAAY,CACtB;UACP,YAAM,KAAK,EAAC,WAAW;YACrB,yBAAgB;kBACX;UACP,YAAM,KAAK,EAAC,SAAS;YACnB,uBAAc,CACT;UACP,YAAM,KAAK,EAAC,WAAW;YACrB,yBAAgB;iBACX;UACP,yCAAmC,CAC/B,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, Host} from '@stencil/core';\nimport {IOrganization} from '@verdocs/js-sdk/Organizations/Types';\nimport UserGroup from './user-group.svg';\n\n/**\n * Display a pop-up describing the company that was hovered over\n */\n@Component({\n  tag: 'verdocs-organization-card',\n  styleUrl: 'verdocs-organization-card.scss',\n})\nexport class VerdocsOrganizationCard {\n  /**\n   * The organization to display\n   */\n  @Prop() organization: IOrganization;\n\n  render() {\n    console.log('org', JSON.stringify(this.organization, null, 2));\n    return (\n      <Host>\n        <span class=\"icon\" innerHTML={UserGroup} />\n\n        <span class=\"content\">{this.organization.name}</span>\n\n        <div class=\"popup\">\n          <div class=\"popup-header\">\n            <span class=\"status\" />\n            <span class=\"title\">{this.organization.name}</span>\n          </div>\n          <div class=\"popup-body\">\n            <span class=\"joined\">\n              <b>Joined</b> {'Jan 1 2022'}\n            </span>\n            <span class=\"followers\">\n              <b>Followers</b> 57\n            </span>\n            <span class=\"website\">\n              <b>Website</b>\n            </span>\n            <span class=\"templates\">\n              <b>Templates</b> 7\n            </span>\n            <span>https://www.google.com</span>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-organization-card.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-organization-card/verdocs-organization-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAGvD,MAAM,QAAQ,GACZ,w9BAAw9B,CAAC;AAE39B,MAAM,YAAY,GAChB,gWAAgW,CAAC;AAEnW;;GAEG;AAKH,MAAM,OAAO,uBAAuB;;;;EAMlC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,YAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,GAAI;MAEzF,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAQ;MAErD,WAAK,KAAK,EAAC,OAAO;QAChB,WAAK,KAAK,EAAC,cAAc;UACvB,YAAM,KAAK,EAAC,QAAQ;YAClB,YAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,GAAI,CACpF;UACP,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAQ,CAC/C;QAEN,WAAK,KAAK,EAAC,YAAY;UACrB,WAAK,KAAK,EAAC,OAAO;YAChB,2BAAuB;YACtB,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,IAAI,SAAS,CAAC,EAAE,UAAU,CAAC,CACpE;UACL,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CACxB,WAAK,KAAK,EAAC,OAAO;YAChB,4BAAwB;YACxB,SAAG,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,UAAU,IAC3D,IAAI,CAAC,YAAY,CAAC,GAAG,CACpB,CACA,CACP,CACG,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {format} from 'date-fns';\nimport {Component, Prop, h, Host} from '@stencil/core';\nimport {IOrganization} from '@verdocs/js-sdk/Organizations/Types';\n\nconst UserIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\"><rect fill=\"none\" height=\"24\" width=\"24\"/><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\"/></g></svg>';\n\nconst BusinessIcon =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\"  focusable=\"false\" aria-hidden=\"true\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\"><path d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\"></path></svg>';\n\n/**\n * Display a small summary card describing an organization\n */\n@Component({\n  tag: 'verdocs-organization-card',\n  styleUrl: 'verdocs-organization-card.scss',\n})\nexport class VerdocsOrganizationCard {\n  /**\n   * The organization to display\n   */\n  @Prop() organization: IOrganization;\n\n  render() {\n    return (\n      <Host>\n        <span class=\"icon\" innerHTML={this.organization.is_business ? BusinessIcon : UserIcon} />\n\n        <span class=\"content\">{this.organization.name}</span>\n\n        <div class=\"popup\">\n          <div class=\"popup-header\">\n            <span class=\"status\">\n              <span class=\"icon\" innerHTML={this.organization.is_business ? BusinessIcon : UserIcon} />\n            </span>\n            <span class=\"title\">{this.organization.name}</span>\n          </div>\n\n          <div class=\"popup-body\">\n            <div class=\"field\">\n              <strong>Joined</strong>\n              {format(new Date(this.organization.created_at || undefined), 'LLL d, Y')}\n            </div>\n            {this.organization.url && (\n              <div class=\"field\">\n                <strong>Website</strong>\n                <a href={this.organization.url} target=\"_blank\" rel=\"nofollow\">\n                  {this.organization.url}\n                </a>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.stories.js

@@ -1,7 +1,8 @@
 import { html } from 'lit-html';
 const MockOrganization = {
-  id: '3',
-  name: 'ACME Widgets, LLC',
+  id: '21643fd6-4097-47c0-9780-62dc0c01ddce',
+  name: 'Verdocs, LLC',
+  url: 'https://verdocs.com/',
   address: null,
   phone: null,
   business_name: null,
@@ -10,6 +11,7 @@ const MockOrganization = {
   contact_email: null,
   timezone: null,
   envelope_responsible: false,
+  created_at: '2022-12-21 20:16:50.262113+00',
 };
 export default {
   title: 'Controls/Organization Card',

package/dist/collection/components/controls/verdocs-organization-card/verdocs-organization-card.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-organization-card.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-organization-card/verdocs-organization-card.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,MAAM,gBAAgB,GAAG;EACvB,EAAE,EAAE,GAAG;EACP,IAAI,EAAE,mBAAmB;EACzB,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,IAAI;EACnB,WAAW,EAAE,IAAI;EACjB,QAAQ,EAAE,IAAI;EACd,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,IAAI;EACd,oBAAoB,EAAE,KAAK;CACX,CAAC;AAEnB,eAAe;EACb,KAAK,EAAE,4BAA4B;EACnC,SAAS,EAAE,2BAA2B;EACtC,IAAI,EAAE;IACJ,YAAY,EAAE,gBAAgB;GAC/B;EACD,QAAQ,EAAE,EAAE;CACL,CAAC;AAEV,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAC,YAAY,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA,4CAA4C,YAAY,KAAK,CAAC","sourcesContent":["import {Meta} from '@storybook/web-components';\nimport {html} from 'lit-html';\nimport {IOrganization} from '@verdocs/js-sdk/Organizations/Types';\n\nconst MockOrganization = {\n  id: '3',\n  name: 'ACME Widgets, LLC',\n  address: null,\n  phone: null,\n  business_name: null,\n  is_business: true,\n  address2: null,\n  contact_email: null,\n  timezone: null,\n  envelope_responsible: false,\n} as IOrganization;\n\nexport default {\n  title: 'Controls/Organization Card',\n  component: 'verdocs-organization-card',\n  args: {\n    organization: MockOrganization,\n  },\n  argTypes: {},\n} as Meta;\n\nexport const OrganizationCard = ({organization}) => html`<verdocs-organization-card .organization=${organization} />`;\n"]}
+{"version":3,"file":"verdocs-organization-card.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-organization-card/verdocs-organization-card.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,MAAM,gBAAgB,GAAG;EACvB,EAAE,EAAE,sCAAsC;EAC1C,IAAI,EAAE,cAAc;EACpB,GAAG,EAAE,sBAAsB;EAC3B,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,IAAI;EACX,aAAa,EAAE,IAAI;EACnB,WAAW,EAAE,IAAI;EACjB,QAAQ,EAAE,IAAI;EACd,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,IAAI;EACd,oBAAoB,EAAE,KAAK;EAC3B,UAAU,EAAE,+BAA+B;CAC3B,CAAC;AAEnB,eAAe;EACb,KAAK,EAAE,4BAA4B;EACnC,SAAS,EAAE,2BAA2B;EACtC,IAAI,EAAE;IACJ,YAAY,EAAE,gBAAgB;GAC/B;EACD,QAAQ,EAAE,EAAE;CACL,CAAC;AAEV,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAC,YAAY,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA,4CAA4C,YAAY,KAAK,CAAC","sourcesContent":["import {Meta} from '@storybook/web-components';\nimport {html} from 'lit-html';\nimport {IOrganization} from '@verdocs/js-sdk/Organizations/Types';\n\nconst MockOrganization = {\n  id: '21643fd6-4097-47c0-9780-62dc0c01ddce',\n  name: 'Verdocs, LLC',\n  url: 'https://verdocs.com/',\n  address: null,\n  phone: null,\n  business_name: null,\n  is_business: true,\n  address2: null,\n  contact_email: null,\n  timezone: null,\n  envelope_responsible: false,\n  created_at: '2022-12-21 20:16:50.262113+00',\n} as IOrganization;\n\nexport default {\n  title: 'Controls/Organization Card',\n  component: 'verdocs-organization-card',\n  args: {\n    organization: MockOrganization,\n  },\n  argTypes: {},\n} as Meta;\n\nexport const OrganizationCard = ({organization}) => html`<verdocs-organization-card .organization=${organization} />`;\n"]}

package/dist/collection/components/controls/verdocs-radio-button/verdocs-radio-button.js

@@ -1,8 +1,21 @@
 import { h, Host } from '@stencil/core';
 /**
- * Displays a radio button. Note that this is different from the `verdocs-field-radio-button` component, which is designed
- * to be used in signing experiences and contains settings that connect to template fields. This is just a simple radio
- * button for UI displays e.g. dialogs and .
+ * Displays a radio button. Note that this is different from the `verdocs-field-radio-button` component, which is
+ * designed to be used in signing experiences and contains settings that connect to template fields. This is just a
+ * simple radio button for UI displays e.g. dialog boxes.
+ *
+ * This control encapsulates a standard HTML radio button. To subscribe to change events, connect an `onChange`
+ * handler. Sample usage:
+ *
+ * ```html
+ * <verdocs-radio-button
+ *    value="val1"
+ *    name="someProperty"
+ *    checked={this.someProperty === 'val1'}
+ *    onInput={(e: any) => { this.someProperty = 'val1' }}
+ *    disabled={false}
+ * />
+ * ```
  */
 export class VerdocsRadioButton {
   constructor() {
@@ -11,12 +24,8 @@ export class VerdocsRadioButton {
     this.value = '';
     this.disabled = false;
   }
-  handleChange(e) {
-    console.log('changed', e.target.checked);
-    this.selected.emit({ value: this.value });
-  }
   render() {
-    return (h(Host, { class: { disabled: this.disabled } }, h("input", { type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled, onChange: e => this.handleChange(e) }), h("label", { htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
+    return (h(Host, { class: { disabled: this.disabled } }, h("input", { type: "radio", value: this.value, name: this.name, id: `verdocs-radio-button-${this.name}-${this.value}`, checked: this.checked, disabled: this.disabled }), h("label", { htmlFor: `verdocs-radio-button-${this.name}-${this.value}` })));
   }
   static get is() { return "verdocs-radio-button"; }
   static get originalStyleUrls() {
@@ -105,23 +114,5 @@ export class VerdocsRadioButton {
       }
     };
   }
-  static get events() {
-    return [{
-        "method": "selected",
-        "name": "selected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\nIt is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\nkeypress."
-        },
-        "complexType": {
-          "original": "{value: string}",
-          "resolved": "{ value: string; }",
-          "references": {}
-        }
-      }];
-  }
 }
 //# sourceMappingURL=verdocs-radio-button.js.map

package/dist/collection/components/controls/verdocs-radio-button/verdocs-radio-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-radio-button.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-radio-button/verdocs-radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAe,MAAM,eAAe,CAAC;AAE5E;;;;GAIG;AAMH,MAAM,OAAO,kBAAkB;;mBAIF,KAAK;gBAKT,EAAE;iBAKD,EAAE;oBAKG,KAAK;;EASlC,YAAY,CAAC,CAAM;IACjB,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACzC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;EAC1C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC;MACpC,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,wBAAwB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,EACrD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACnC;MACF,aAAO,OAAO,EAAE,wBAAwB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,GAAI,CAChE,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';\n\n/**\n * Displays a radio button. Note that this is different from the `verdocs-field-radio-button` component, which is designed\n * to be used in signing experiences and contains settings that connect to template fields. This is just a simple radio\n * button for UI displays e.g. dialogs and .\n */\n@Component({\n  tag: 'verdocs-radio-button',\n  styleUrl: 'verdocs-radio-button.scss',\n  shadow: false,\n})\nexport class VerdocsRadioButton {\n  /**\n   * Whether the radio button is currently selected.\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * HTML form field name for the input.\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Value to track with the input.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * If set, the button will still be displayed but not selectable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Event fired when the input field value changes. Note that this will only be fired on blur, tab-out, ENTER key press, etc.\n   * It is generally the best event to subscribe to than `input` for most cases EXCEPT autocomplete fields that need to see every\n   * keypress.\n   */\n  @Event({composed: true}) selected: EventEmitter<{value: string}>;\n\n  handleChange(e: any) {\n    console.log('changed', e.target.checked);\n    this.selected.emit({value: this.value});\n  }\n\n  render() {\n    return (\n      <Host class={{disabled: this.disabled}}>\n        <input\n          type=\"radio\"\n          value={this.value}\n          name={this.name}\n          id={`verdocs-radio-button-${this.name}-${this.value}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          onChange={e => this.handleChange(e)}\n        />\n        <label htmlFor={`verdocs-radio-button-${this.name}-${this.value}`} />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-radio-button.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-radio-button/verdocs-radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,eAAe,CAAC;AAEvD;;;;;;;;;;;;;;;;;GAiBG;AAMH,MAAM,OAAO,kBAAkB;;mBAIF,KAAK;gBAKT,EAAE;iBAKD,EAAE;oBAKG,KAAK;;EAElC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC;MACpC,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,wBAAwB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,EACrD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAEvB;MACF,aAAO,OAAO,EAAE,wBAAwB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,GAAI,CAChE,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, h, Host, Prop} from '@stencil/core';\n\n/**\n * Displays a radio button. Note that this is different from the `verdocs-field-radio-button` component, which is\n * designed to be used in signing experiences and contains settings that connect to template fields. This is just a\n * simple radio button for UI displays e.g. dialog boxes.\n *\n * This control encapsulates a standard HTML radio button. To subscribe to change events, connect an `onChange`\n * handler. Sample usage:\n *\n * ```html\n * <verdocs-radio-button\n *    value=\"val1\"\n *    name=\"someProperty\"\n *    checked={this.someProperty === 'val1'}\n *    onInput={(e: any) => { this.someProperty = 'val1' }}\n *    disabled={false}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-radio-button',\n  styleUrl: 'verdocs-radio-button.scss',\n  shadow: false,\n})\nexport class VerdocsRadioButton {\n  /**\n   * Whether the radio button is currently selected.\n   */\n  @Prop() checked: boolean = false;\n\n  /**\n   * HTML form field name for the input.\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Value to track with the input.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * If set, the button will still be displayed but not selectable.\n   */\n  @Prop() disabled?: boolean = false;\n\n  render() {\n    return (\n      <Host class={{disabled: this.disabled}}>\n        <input\n          type=\"radio\"\n          value={this.value}\n          name={this.name}\n          id={`verdocs-radio-button-${this.name}-${this.value}`}\n          checked={this.checked}\n          disabled={this.disabled}\n          // onChange={e => this.handleChange(e)}\n        />\n        <label htmlFor={`verdocs-radio-button-${this.name}-${this.value}`} />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/controls/verdocs-radio-button/verdocs-radio-button.stories.js

@@ -8,7 +8,12 @@ export default {
     value: '1',
     disabled: false,
   },
-  argTypes: {},
+  argTypes: {
+    onInput: {
+      action: 'input',
+      description: 'Fired when the radio button is clicked. e.target.checked will always be true, because radio button onChange events are fired only when the radio button is clicked to select it.',
+    },
+  },
 };
-export const RadioButton = ({ checked, name, value, disabled }) => html ` <verdocs-radio-button .checked=${checked} .name=${name} .value=${value} .disabled=${disabled} /> `;
+export const RadioButton = ({ checked, name, value, disabled, onInput }) => html ` <verdocs-radio-button .checked=${checked} .name=${name} .value=${value} .disabled="${disabled}" @input=${onInput} /> `;
 //# sourceMappingURL=verdocs-radio-button.stories.js.map

package/dist/collection/components/controls/verdocs-radio-button/verdocs-radio-button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-radio-button.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-radio-button/verdocs-radio-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,SAAS,EAAE,sBAAsB;EACjC,IAAI,EAAE;IACJ,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,KAAK;GAChB;EACD,QAAQ,EAAE,EAAE;CACL,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAE,CAAC,IAAI,CAAA,mCAAmC,OAAO,UAAU,IAAI,WAAW,KAAK,cAAc,QAAQ,MAAM,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Controls/Radio Button',\n  component: 'verdocs-radio-button',\n  args: {\n    checked: false,\n    name: 'test',\n    value: '1',\n    disabled: false,\n  },\n  argTypes: {},\n} as Meta;\n\nexport const RadioButton = ({checked, name, value, disabled}) => html` <verdocs-radio-button .checked=${checked} .name=${name} .value=${value} .disabled=${disabled} /> `;\n"]}
+{"version":3,"file":"verdocs-radio-button.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-radio-button/verdocs-radio-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,SAAS,EAAE,sBAAsB;EACjC,IAAI,EAAE;IACJ,OAAO,EAAE,KAAK;IACd,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,KAAK;GAChB;EACD,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,MAAM,EAAE,OAAO;MACf,WAAW,EACT,kLAAkL;KACrL;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAC,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAC,EAAE,EAAE,CACvE,IAAI,CAAA,mCAAmC,OAAO,UAAU,IAAI,WAAW,KAAK,eAAe,QAAQ,YAAY,OAAO,MAAM,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Controls/Radio Button',\n  component: 'verdocs-radio-button',\n  args: {\n    checked: false,\n    name: 'test',\n    value: '1',\n    disabled: false,\n  },\n  argTypes: {\n    onInput: {\n      action: 'input',\n      description:\n        'Fired when the radio button is clicked. e.target.checked will always be true, because radio button onChange events are fired only when the radio button is clicked to select it.',\n    },\n  },\n} as Meta;\n\nexport const RadioButton = ({checked, name, value, disabled, onInput}) =>\n  html` <verdocs-radio-button .checked=${checked} .name=${name} .value=${value} .disabled=\"${disabled}\" @input=${onInput} /> `;\n"]}

package/dist/collection/components/controls/verdocs-select-input/verdocs-select-input.js

@@ -10,19 +10,9 @@ export class VerdocsSelectInput {
     this.label = '';
     this.options = undefined;
     this.disabled = false;
-    this._value = '';
-  }
-  componentWillLoad() {
-    this._value = this.value;
-  }
-  componentDidLoad() { }
-  handleInput(e) {
-    var _a;
-    this._value = e.target.value;
-    (_a = this.fieldChange) === null || _a === void 0 ? void 0 : _a.emit(e.target.value);
   }
   render() {
-    return (h(Host, { class: "input-field" }, h("label", null, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("select", { class: "input-element", disabled: this.disabled, onInput: e => this.handleInput(e) }, this.options.map(option => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))))));
+    return (h(Host, { class: "input-field" }, h("label", null, this.label ? h("div", { class: "input-label" }, this.label + ':') : h("div", null), h("select", { class: "input-element", disabled: this.disabled }, this.options.map(option => (h("option", { value: option.value, selected: option.value === this.value }, option.label)))))));
   }
   static get is() { return "verdocs-select-input"; }
   static get originalStyleUrls() {
@@ -108,28 +98,5 @@ export class VerdocsSelectInput {
       }
     };
   }
-  static get states() {
-    return {
-      "_value": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "fieldChange",
-        "name": "fieldChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event fired when the selection has changed"
-        },
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        }
-      }];
-  }
 }
 //# sourceMappingURL=verdocs-select-input.js.map

package/dist/collection/components/controls/verdocs-select-input/verdocs-select-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-select-input.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-select-input/verdocs-select-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAe,MAAM,eAAe,CAAC;AAEnF;;;;GAIG;AAKH,MAAM,OAAO,kBAAkB;;iBAIL,EAAE;iBAKF,EAAE;;oBAUE,KAAK;kBAEP,EAAE;;EAO5B,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;EAC3B,CAAC;EAED,gBAAgB,KAAI,CAAC;EAErB,WAAW,CAAC,CAAM;;IAChB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;IAC7B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;EACzC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,aAAa;MACvB;QACG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,GAAG,GAAG,CAAO,CAAC,CAAC,CAAC,cAAO;QACzE,cAAQ,KAAK,EAAC,eAAe,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IACrF,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC1B,cAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,IAC/D,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,CACH,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, State, Host, h, Event, EventEmitter} from '@stencil/core';\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.\n */\n@Component({\n  tag: 'verdocs-select-input',\n  styleUrl: 'verdocs-select-input.scss',\n})\nexport class VerdocsSelectInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The options to list.\n   */\n  @Prop() options: {label: string; value: string}[];\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() _value: string = '';\n\n  /**\n   * Event fired when the selection has changed\n   */\n  @Event({composed: true}) fieldChange: EventEmitter<string>;\n\n  componentWillLoad() {\n    this._value = this.value;\n  }\n\n  componentDidLoad() {}\n\n  handleInput(e: any) {\n    this._value = e.target.value;\n    this.fieldChange?.emit(e.target.value);\n  }\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <select class=\"input-element\" disabled={this.disabled} onInput={e => this.handleInput(e)}>\n            {this.options.map(option => (\n              <option value={option.value} selected={option.value === this.value}>\n                {option.label}\n              </option>\n            ))}\n          </select>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-select-input.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-select-input/verdocs-select-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;;GAIG;AAKH,MAAM,OAAO,kBAAkB;;iBAIL,EAAE;iBAKF,EAAE;;oBAUE,KAAK;;EAEjC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAC,aAAa;MACvB;QACG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,GAAG,GAAG,CAAO,CAAC,CAAC,CAAC,cAAO;QACzE,cAAQ,KAAK,EAAC,eAAe,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAClD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC1B,cAAQ,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,IAC/D,MAAM,CAAC,KAAK,CACN,CACV,CAAC,CACK,CACH,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, Host, h} from '@stencil/core';\n\n/**\n * Display a text input field. This is just a standard HTML input field with minimal markup to fit the\n * visual styles of the other components. Note that events \"bubble\" from the input field to the container,\n * so you can subscribe to the same DOM events (input, blur, etc) that a normal input would emmit.\n */\n@Component({\n  tag: 'verdocs-select-input',\n  styleUrl: 'verdocs-select-input.scss',\n})\nexport class VerdocsSelectInput {\n  /**\n   * The initial value for the input field.\n   */\n  @Prop() value: string = '';\n\n  /**\n   * The label for the field.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * The options to list.\n   */\n  @Prop() options: {label: string; value: string}[];\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <select class=\"input-element\" disabled={this.disabled}>\n            {this.options.map(option => (\n              <option value={option.value} selected={option.value === this.value}>\n                {option.label}\n              </option>\n            ))}\n          </select>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/controls/verdocs-select-input/verdocs-select-input.stories.js

@@ -12,13 +12,11 @@ export default {
     ],
   },
   argTypes: {
-    change: {
-      action: 'change',
-      table: {
-        disable: true,
-      },
+    onInput: {
+      action: 'input',
+      description: 'Fired when a new value is selected. e.target.value will contain the selected value.',
     },
   },
 };
-export const SelectInput = ({ type, label, value, placeholder, options, disabled, change }) => html `<verdocs-select-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .options=${options} .disabled=${disabled} @change=${change} />`;
+export const SelectInput = ({ type, label, value, placeholder, options, disabled, onInput }) => html `<verdocs-select-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .options=${options} .disabled=${disabled} @input=${onInput} />`;
 //# sourceMappingURL=verdocs-select-input.stories.js.map

package/dist/collection/components/controls/verdocs-select-input/verdocs-select-input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-select-input.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-select-input/verdocs-select-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,SAAS,EAAE,sBAAsB;EACjC,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,EAAE;IACT,OAAO,EAAE;MACP,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC;MAC/B,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC;MAC/B,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC;KAChC;GACF;EACD,QAAQ,EAAE;IACR,MAAM,EAAE;MACN,MAAM,EAAE,QAAQ;MAChB,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;OACd;KACF;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAC,EAAE,EAAE,CAC1F,IAAI,CAAA,+BAA+B,IAAI,WAAW,KAAK,iBAAiB,WAAW,WAAW,KAAK,aAAa,OAAO,cAAc,QAAQ,YAAY,MAAM,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Controls/Select Input',\n  component: 'verdocs-select-input',\n  args: {\n    label: 'Name',\n    value: '',\n    options: [\n      {label: 'Option 1', value: '1'},\n      {label: 'Option 2', value: '2'},\n      {label: 'Option 3', value: '3'},\n    ],\n  },\n  argTypes: {\n    change: {\n      action: 'change',\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta;\n\nexport const SelectInput = ({type, label, value, placeholder, options, disabled, change}) =>\n  html`<verdocs-select-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .options=${options} .disabled=${disabled} @change=${change} />`;\n"]}
+{"version":3,"file":"verdocs-select-input.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-select-input/verdocs-select-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,SAAS,EAAE,sBAAsB;EACjC,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,EAAE;IACT,OAAO,EAAE;MACP,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC;MAC/B,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC;MAC/B,EAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC;KAChC;GACF;EACD,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,MAAM,EAAE,OAAO;MACf,WAAW,EAAE,qFAAqF;KACnG;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAC,EAAE,EAAE,CAC3F,IAAI,CAAA,+BAA+B,IAAI,WAAW,KAAK,iBAAiB,WAAW,WAAW,KAAK,aAAa,OAAO,cAAc,QAAQ,WAAW,OAAO,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Controls/Select Input',\n  component: 'verdocs-select-input',\n  args: {\n    label: 'Name',\n    value: '',\n    options: [\n      {label: 'Option 1', value: '1'},\n      {label: 'Option 2', value: '2'},\n      {label: 'Option 3', value: '3'},\n    ],\n  },\n  argTypes: {\n    onInput: {\n      action: 'input',\n      description: 'Fired when a new value is selected. e.target.value will contain the selected value.',\n    },\n  },\n} as Meta;\n\nexport const SelectInput = ({type, label, value, placeholder, options, disabled, onInput}) =>\n  html`<verdocs-select-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .options=${options} .disabled=${disabled} @input=${onInput} />`;\n"]}

package/dist/collection/components/controls/verdocs-status-indicator/verdocs-status-indicator.js

@@ -38,7 +38,7 @@ export class VerdocsStatusIndicator {
     this.size = 'normal';
     this.theme = 'light';
     this.status = undefined;
-    this.document = undefined;
+    this.envelope = undefined;
     this.isOpen = undefined;
     this.recipientStatusIcons = [];
     this.containerId = `verdocs-status-indicator-${Math.random().toString(36).substring(2, 11)}`;
@@ -46,9 +46,9 @@ export class VerdocsStatusIndicator {
   componentDidLoad() {
     var _a;
     this.popper = createPopper(this.summaryComponent, this.detailPanel, { placement: 'bottom-start', modifiers: [{ name: 'offset', options: { offset: [0, 10] } }] });
-    if ((_a = this.document) === null || _a === void 0 ? void 0 : _a.recipients) {
+    if ((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.recipients) {
       const recipientsAtLevel = [];
-      this.document.recipients.forEach(recipient => {
+      this.envelope.recipients.forEach(recipient => {
         const level = recipient.sequence - 1;
         recipientsAtLevel[level] || (recipientsAtLevel[level] = []);
         const id = `r-${level}-${recipientsAtLevel[level].length}`;
@@ -228,20 +228,20 @@ export class VerdocsStatusIndicator {
   render() {
     var _a, _b;
     // The extra fallback for accepted is to future proof for when we add that.
-    let status = this.status || ((_a = this.document) === null || _a === void 0 ? void 0 : _a.status) || 'pending' || 'accepted';
-    if (!this.status && ((_b = this.document) === null || _b === void 0 ? void 0 : _b.recipients)) {
-      const submittedRecipients = this.document.recipients.filter(r => r.status === 'submitted');
-      if (submittedRecipients.length > 0 && submittedRecipients.length !== this.document.recipients.length) {
+    let status = this.status || ((_a = this.envelope) === null || _a === void 0 ? void 0 : _a.status) || 'pending' || 'accepted';
+    if (!this.status && ((_b = this.envelope) === null || _b === void 0 ? void 0 : _b.recipients)) {
+      const submittedRecipients = this.envelope.recipients.filter(r => r.status === 'submitted');
+      if (submittedRecipients.length > 0 && submittedRecipients.length !== this.envelope.recipients.length) {
         status = 'some-signed';
       }
     }
     const icon = this.getStatusIcon(status);
     const statusMessage = this.getStatusMessage(status);
-    return (h(Host, { ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.document ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
+    return (h(Host, { ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
         e.stopPropagation();
         e.preventDefault();
-        this.document && this.toggleDropdown();
-      }, onBlur: e => this.document && this.handleHideDropdown(e) }, h("span", { class: "icon", innerHTML: icon }), h("span", { class: "content" }, statusMessage), h("div", { class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
+        this.envelope && this.toggleDropdown();
+      }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { class: "icon", innerHTML: icon }), h("span", { class: "content" }, statusMessage), h("div", { class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
   }
   static get is() { return "verdocs-status-indicator"; }
   static get originalStyleUrls() {
@@ -296,16 +296,16 @@ export class VerdocsStatusIndicator {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "TDocumentStatus | TRecipientStatus | 'accepted'",
+          "original": "TEnvelopeStatus | TRecipientStatus | 'accepted'",
           "resolved": "\"accepted\" | \"canceled\" | \"complete\" | \"declined\" | \"in progress\" | \"invited\" | \"opened\" | \"pending\" | \"signed\" | \"submitted\"",
           "references": {
-            "TDocumentStatus": {
+            "TEnvelopeStatus": {
               "location": "import",
-              "path": "@verdocs/js-sdk/Documents/Types"
+              "path": "@verdocs/js-sdk/Envelopes/Types"
             },
             "TRecipientStatus": {
               "location": "import",
-              "path": "@verdocs/js-sdk/Documents/Types"
+              "path": "@verdocs/js-sdk/Envelopes/Types"
             }
           }
         },
@@ -318,16 +318,16 @@ export class VerdocsStatusIndicator {
         "attribute": "status",
         "reflect": false
       },
-      "document": {
+      "envelope": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "IDocument",
-          "resolved": "IDocument",
+          "original": "IEnvelope",
+          "resolved": "IEnvelope",
           "references": {
-            "IDocument": {
+            "IEnvelope": {
               "location": "import",
-              "path": "@verdocs/js-sdk/Documents/Types"
+              "path": "@verdocs/js-sdk/Envelopes/Types"
             }
           }
         },