@verdocs/web-sdk 1.9.9 → 1.9.10

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":"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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@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-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-text-input/verdocs-text-input.js

@@ -12,15 +12,7 @@ export class VerdocsTextInput {
     this.autocomplete = '';
     this.type = 'text';
     this.disabled = false;
-    this._value = '';
   }
-  componentWillLoad() {
-    // this._value = this.value;
-  }
-  componentDidLoad() { }
-  // handleInput(e: any) {
-  //   this._value = 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("input", { type: this.type, value: this.value, class: "input-element", "data-lpignore": "true", disabled: this.disabled, placeholder: this.placeholder, autoComplete: this.autocomplete }))));
   }
@@ -147,10 +139,5 @@ export class VerdocsTextInput {
       }
     };
   }
-  static get states() {
-    return {
-      "_value": {}
-    };
-  }
 }
 //# sourceMappingURL=verdocs-text-input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-text-input.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE9D;;;;GAIG;AAKH,MAAM,OAAO,gBAAgB;;iBAIH,EAAE;iBAKF,EAAE;uBAKI,EAAE;wBAKD,EAAE;gBAMmD,MAAM;oBAK9D,KAAK;kBAEP,EAAE;;EAE5B,iBAAiB;IACf,4BAA4B;EAC9B,CAAC;EAED,gBAAgB,KAAI,CAAC;EAErB,wBAAwB;EACxB,kCAAkC;EAClC,IAAI;EAEJ,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,aACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,eAAe,mBACP,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,GAE/B,CACI,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, State, 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-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\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 placeholder for the field.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * If desired, the autocomplete attribute to set.\n   */\n  @Prop() autocomplete: string = '';\n\n  /**\n   * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n   * (e.g. a date picker) will be supported by other controls in the future.\n   */\n  @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'text';\n\n  /**\n   * Should the field be disabled?\n   */\n  @Prop() disabled: boolean = false;\n\n  @State() _value: 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  // }\n\n  render() {\n    return (\n      <Host class=\"input-field\">\n        <label>\n          {this.label ? <div class=\"input-label\">{this.label + ':'}</div> : <div />}\n          <input\n            type={this.type}\n            value={this.value}\n            class=\"input-element\"\n            data-lpignore=\"true\"\n            disabled={this.disabled}\n            placeholder={this.placeholder}\n            autoComplete={this.autocomplete}\n            // onInput={e => this.handleInput(e)}\n          />\n        </label>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-text-input.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-text-input/verdocs-text-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEvD;;;;GAIG;AAKH,MAAM,OAAO,gBAAgB;;iBAIH,EAAE;iBAKF,EAAE;uBAKI,EAAE;wBAKD,EAAE;gBAMmD,MAAM;oBAK9D,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,aACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,eAAe,mBACP,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,GAC/B,CACI,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-text-input',\n  styleUrl: 'verdocs-text-input.scss',\n})\nexport class VerdocsTextInput {\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 placeholder for the field.\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * If desired, the autocomplete attribute to set.\n   */\n  @Prop() autocomplete: string = '';\n\n  /**\n   * The type of field to render. Only text-type fields are allowed here for the current styling. Additional types\n   * (e.g. a date picker) will be supported by other controls in the future.\n   */\n  @Prop() type: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' = 'text';\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          <input\n            type={this.type}\n            value={this.value}\n            class=\"input-element\"\n            data-lpignore=\"true\"\n            disabled={this.disabled}\n            placeholder={this.placeholder}\n            autoComplete={this.autocomplete}\n          />\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -8,13 +8,11 @@ export default {
     placeholder: 'Enter your name...',
   },
   argTypes: {
-    input: {
+    onInput: {
       action: 'input',
-      table: {
-        disable: true,
-      },
+      description: 'Fired for each character entered in the field. e.target.value will contain the current text value.',
     },
   },
 };
-export const TextInput = ({ type, label, value, placeholder, disabled, input }) => html `<verdocs-text-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .disabled=${disabled} @input=${input} />`;
+export const TextInput = ({ type, label, value, placeholder, disabled, onInput }) => html `<verdocs-text-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .disabled=${disabled} @input=${onInput} />`;
 //# sourceMappingURL=verdocs-text-input.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-text-input.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-text-input/verdocs-text-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,SAAS,EAAE,oBAAoB;EAC/B,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,EAAE;IACT,WAAW,EAAE,oBAAoB;GAClC;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,MAAM,EAAE,OAAO;MACf,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;OACd;KACF;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAC,EAAE,EAAE,CAC9E,IAAI,CAAA,6BAA6B,IAAI,WAAW,KAAK,iBAAiB,WAAW,WAAW,KAAK,cAAc,QAAQ,WAAW,KAAK,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Controls/Text Input',\n  component: 'verdocs-text-input',\n  args: {\n    label: 'Name',\n    value: '',\n    placeholder: 'Enter your name...',\n  },\n  argTypes: {\n    input: {\n      action: 'input',\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta;\n\nexport const TextInput = ({type, label, value, placeholder, disabled, input}) =>\n  html`<verdocs-text-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .disabled=${disabled} @input=${input} />`;\n"]}
+{"version":3,"file":"verdocs-text-input.stories.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-text-input/verdocs-text-input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,UAAU,CAAC;AAG9B,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,SAAS,EAAE,oBAAoB;EAC/B,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,EAAE;IACT,WAAW,EAAE,oBAAoB;GAClC;EACD,QAAQ,EAAE;IACR,OAAO,EAAE;MACP,MAAM,EAAE,OAAO;MACf,WAAW,EAAE,oGAAoG;KAClH;GACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAC,EAAE,EAAE,CAChF,IAAI,CAAA,6BAA6B,IAAI,WAAW,KAAK,iBAAiB,WAAW,WAAW,KAAK,cAAc,QAAQ,WAAW,OAAO,KAAK,CAAC","sourcesContent":["import {html} from 'lit-html';\nimport {Meta} from '@storybook/web-components';\n\nexport default {\n  title: 'Controls/Text Input',\n  component: 'verdocs-text-input',\n  args: {\n    label: 'Name',\n    value: '',\n    placeholder: 'Enter your name...',\n  },\n  argTypes: {\n    onInput: {\n      action: 'input',\n      description: 'Fired for each character entered in the field. e.target.value will contain the current text value.',\n    },\n  },\n} as Meta;\n\nexport const TextInput = ({type, label, value, placeholder, disabled, onInput}) =>\n  html`<verdocs-text-input .type=${type} .label=${label} .placeholder=${placeholder} .value=${value} .disabled=${disabled} @input=${onInput} />`;\n"]}

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

@@ -1,10 +1,6 @@
 import { h } from '@stencil/core';
 /**
  * Displays a label and a set of buttons, also allowing a default selection of a button
- *
- * ```typescript
- *
- * ```
  */
 export class VerdocsToggle {
   constructor() {
@@ -16,28 +12,6 @@ export class VerdocsToggle {
     var _a;
     this.selectedOption = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.defaultSelection) || 0;
   }
-  // @Listen('click', {
-  //   target: 'document',
-  //   capture: true,
-  //   passive: false,
-  // })
-  // handleClick(event) {
-  //   event.preventDefault();
-  //   let container = event.target;
-  //   if (container.matches('toggle-icon-buttons')) {
-  //     container = event.target.shadowRoot;
-  //     const element = container.activeElement;
-  //     const siblings = Array.from(element.parentElement.children).filter(child => {
-  //       return child !== element;
-  //     });
-  //     siblings.map((sibling: any) => {
-  //       return sibling.classList.remove('selected');
-  //     });
-  //     if (!element.classList.contains('selected')) {
-  //       element.classList.add('selected');
-  //     }
-  //   }
-  // }
   render() {
     return (h("div", { class: "container" }, h("span", { class: "label" }, `${this.options.label}:`), h("div", { class: "buttons" }, this.options.buttons.map((button, index) => (h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index === this.selectedOption ? 'selected' : '', onClick: () => {
         console.log('clicked', index);

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

@@ -1 +1 @@
-{"version":3,"file":"verdocs-toggle.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-toggle/verdocs-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAaxD;;;;;;GAMG;AAKH,MAAM,OAAO,aAAa;;;;0BAWU,CAAC;;EAEnC,iBAAiB;;IACf,IAAI,CAAC,cAAc,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,gBAAgB,KAAI,CAAC,CAAC;EAC5D,CAAC;EAED,qBAAqB;EACrB,wBAAwB;EACxB,mBAAmB;EACnB,oBAAoB;EACpB,KAAK;EACL,uBAAuB;EACvB,4BAA4B;EAC5B,kCAAkC;EAClC,oDAAoD;EACpD,2CAA2C;EAC3C,+CAA+C;EAC/C,oFAAoF;EACpF,kCAAkC;EAClC,UAAU;EACV,uCAAuC;EACvC,qDAAqD;EACrD,UAAU;EACV,qDAAqD;EACrD,2CAA2C;EAC3C,QAAQ;EACR,MAAM;EACN,IAAI;EAEJ,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,WAAW;MACpB,YAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,CAAQ;MACrD,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAgB,EAAE,KAAa,EAAE,EAAE,CAAC,CAC7D,cACE,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACtD,OAAO,EAAE,GAAG,EAAE;UACZ,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;UAC9B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC9B,CAAC,GACD,CACH,CAAC,CACE,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, State} from '@stencil/core';\n\nexport interface IButtons {\n  id: string;\n  icon: string;\n}\n\nexport interface IToggleIconButtons {\n  label: string;\n  defaultSelection: number;\n  buttons: IButtons[];\n}\n\n/**\n * Displays a label and a set of buttons, also allowing a default selection of a button\n *\n * ```typescript\n *\n * ```\n */\n@Component({\n  tag: 'verdocs-toggle',\n  styleUrl: 'verdocs-toggle.scss',\n})\nexport class VerdocsToggle {\n  /**\n   * The tags to display\n   */\n  @Prop() options: IToggleIconButtons;\n\n  /**\n   * The \"theme\" to be used\n   */\n  @Prop() theme: 'light' | 'dark';\n\n  @State() selectedOption: number = 0;\n\n  componentWillLoad() {\n    this.selectedOption = this.options?.defaultSelection || 0;\n  }\n\n  // @Listen('click', {\n  //   target: 'document',\n  //   capture: true,\n  //   passive: false,\n  // })\n  // handleClick(event) {\n  //   event.preventDefault();\n  //   let container = event.target;\n  //   if (container.matches('toggle-icon-buttons')) {\n  //     container = event.target.shadowRoot;\n  //     const element = container.activeElement;\n  //     const siblings = Array.from(element.parentElement.children).filter(child => {\n  //       return child !== element;\n  //     });\n  //     siblings.map((sibling: any) => {\n  //       return sibling.classList.remove('selected');\n  //     });\n  //     if (!element.classList.contains('selected')) {\n  //       element.classList.add('selected');\n  //     }\n  //   }\n  // }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <span class=\"label\">{`${this.options.label}:`}</span>\n        <div class=\"buttons\">\n          {this.options.buttons.map((button: IButtons, index: number) => (\n            <button\n              id={button.id}\n              key={button.id}\n              innerHTML={button.icon}\n              class={index === this.selectedOption ? 'selected' : ''}\n              onClick={() => {\n                console.log('clicked', index);\n                this.selectedOption = index;\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-toggle.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-toggle/verdocs-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAaxD;;GAEG;AAKH,MAAM,OAAO,aAAa;;;;0BAWU,CAAC;;EAEnC,iBAAiB;;IACf,IAAI,CAAC,cAAc,GAAG,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,gBAAgB,KAAI,CAAC,CAAC;EAC5D,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,WAAW;MACpB,YAAM,KAAK,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,CAAQ;MACrD,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAgB,EAAE,KAAa,EAAE,EAAE,CAAC,CAC7D,cACE,EAAE,EAAE,MAAM,CAAC,EAAE,EACb,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACtD,OAAO,EAAE,GAAG,EAAE;UACZ,OAAO,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;UAC9B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAC9B,CAAC,GACD,CACH,CAAC,CACE,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h, State} from '@stencil/core';\n\nexport interface IButtons {\n  id: string;\n  icon: string;\n}\n\nexport interface IToggleIconButtons {\n  label: string;\n  defaultSelection: number;\n  buttons: IButtons[];\n}\n\n/**\n * Displays a label and a set of buttons, also allowing a default selection of a button\n */\n@Component({\n  tag: 'verdocs-toggle',\n  styleUrl: 'verdocs-toggle.scss',\n})\nexport class VerdocsToggle {\n  /**\n   * The tags to display\n   */\n  @Prop() options: IToggleIconButtons;\n\n  /**\n   * The \"theme\" to be used\n   */\n  @Prop() theme: 'light' | 'dark';\n\n  @State() selectedOption: number = 0;\n\n  componentWillLoad() {\n    this.selectedOption = this.options?.defaultSelection || 0;\n  }\n\n  render() {\n    return (\n      <div class=\"container\">\n        <span class=\"label\">{`${this.options.label}:`}</span>\n        <div class=\"buttons\">\n          {this.options.buttons.map((button: IButtons, index: number) => (\n            <button\n              id={button.id}\n              key={button.id}\n              innerHTML={button.icon}\n              class={index === this.selectedOption ? 'selected' : ''}\n              onClick={() => {\n                console.log('clicked', index);\n                this.selectedOption = index;\n              }}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,5 +1,6 @@
 import { createPopper } from '@popperjs/core';
 import { h, Host } from '@stencil/core';
+// import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';
 /**
  * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.
  */
@@ -30,12 +31,11 @@ export class VerdocsToolbarIcon {
     var _a;
     (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-show');
   }
-  handlePress() {
-    var _a;
-    (_a = this.press) === null || _a === void 0 ? void 0 : _a.emit();
-  }
+  // handlePress() {
+  //   this.press?.emit();
+  // }
   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(), onClick: () => this.handlePress(), ref: el => (this.iconEl = el) }), h("div", { id: this.containerId, role: "tooltip", class: "tooltip", "data-popper-placement": "bottom", ref: el => (this.tooltip = el) }, this.text, h("div", { "data-popper-arrow": "true", class: "arrow" }))));
+    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.tooltip = el) }, this.text, h("div", { "data-popper-arrow": "true", class: "arrow" }))));
   }
   static get is() { return "verdocs-toolbar-icon"; }
   static get originalStyleUrls() {
@@ -93,23 +93,5 @@ export class VerdocsToolbarIcon {
       "containerId": {}
     };
   }
-  static get events() {
-    return [{
-        "method": "press",
-        "name": "press",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Triggered when the icon is pressed"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
 }
 //# sourceMappingURL=verdocs-toolbar-icon.js.map

package/dist/collection/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"verdocs-toolbar-icon.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAW,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAC,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAEnF;;GAEG;AAMH,MAAM,OAAO,kBAAkB;;gBAQN,EAAE;gBAKF,EAAE;uBAOF,wBAAwB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE;;EAE5F,gBAAgB;IACd,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;IAC5D,wBAAwB;IACxB,6DAA6D;KAC9D,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;MAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;EACH,CAAC;EAED,IAAI;;IACF,MAAA,IAAI,CAAC,OAAO,0CAAE,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAA,IAAI,CAAC,cAAc,0CAAE,MAAM,GAAG,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;EAChD,CAAC;EAED,IAAI;;IACF,MAAA,IAAI,CAAC,OAAO,0CAAE,eAAe,CAAC,WAAW,CAAC,CAAC;EAC7C,CAAC;EAED,WAAW;;IACT,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,EAAE,CAAC;EACrB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE;MACb,+BACoB,IAAI,CAAC,WAAW,EAClC,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC1B,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EACjC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAoB,CAAC,GAC/C;MACF,WACE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,SAAS,2BAEO,QAAQ,EAC9B,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAoB,CAAC;QAE/C,IAAI,CAAC,IAAI;QACV,gCAAuB,MAAM,EAAC,KAAK,EAAC,OAAO,GAAG,CAC1C,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {createPopper, Instance} from '@popperjs/core';\nimport {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n */\n@Component({\n  tag: 'verdocs-toolbar-icon',\n  styleUrl: 'verdocs-toolbar-icon.scss',\n  shadow: false,\n})\nexport class VerdocsToolbarIcon {\n  iconEl: HTMLDivElement;\n  tooltip: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Triggered when the icon is pressed\n   */\n  @Event({composed: true}) press: EventEmitter;\n\n  @State() containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.iconEl, this.tooltip, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  show() {\n    this.tooltip?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltip?.removeAttribute('data-show');\n  }\n\n  handlePress() {\n    this.press?.emit();\n  }\n\n  render() {\n    return (\n      <Host class={{}}>\n        <div\n          aria-describedby={this.containerId}\n          class=\"icon\"\n          innerHTML={this.icon}\n          onMouseEnter={() => this.show()}\n          onFocus={() => this.show()}\n          onMouseLeave={() => this.hide()}\n          onBlur={() => this.hide()}\n          onClick={() => this.handlePress()}\n          ref={el => (this.iconEl = el as HTMLDivElement)}\n        />\n        <div\n          id={this.containerId}\n          role=\"tooltip\"\n          class=\"tooltip\"\n          // style=\"display: none; visibility: visible; margin: 0px; position: absolute; inset: 0px auto auto 0px; transform: translate(951px, 5510px);\"\n          data-popper-placement=\"bottom\"\n          ref={el => (this.tooltip = el as HTMLDivElement)}\n        >\n          {this.text}\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"verdocs-toolbar-icon.js","sourceRoot":"","sources":["../../../../src/components/controls/verdocs-toolbar-icon/verdocs-toolbar-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAW,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAC,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAC;AAC9D,sFAAsF;AAEtF;;GAEG;AAMH,MAAM,OAAO,kBAAkB;;gBAQN,EAAE;gBAKF,EAAE;uBAOF,wBAAwB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE;;EAE5F,gBAAgB;IACd,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE;IAC5D,wBAAwB;IACxB,6DAA6D;KAC9D,CAAC,CAAC;EACL,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;MAC9B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;EACH,CAAC;EAED,IAAI;;IACF,MAAA,IAAI,CAAC,OAAO,0CAAE,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC5C,MAAA,IAAI,CAAC,cAAc,0CAAE,MAAM,GAAG,KAAK,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;EAChD,CAAC;EAED,IAAI;;IACF,MAAA,IAAI,CAAC,OAAO,0CAAE,eAAe,CAAC,WAAW,CAAC,CAAC;EAC7C,CAAC;EAED,kBAAkB;EAClB,wBAAwB;EACxB,IAAI;EAEJ,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE;MACb,+BACoB,IAAI,CAAC,WAAW,EAClC,KAAK,EAAC,MAAM,EACZ,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC1B,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EACzB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAoB,CAAC,GAC/C;MACF,WAAK,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,2BAAuB,QAAQ,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAoB,CAAC;QACtI,IAAI,CAAC,IAAI;QACV,gCAAuB,MAAM,EAAC,KAAK,EAAC,OAAO,GAAG,CAC1C,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {createPopper, Instance} from '@popperjs/core';\nimport {Component, h, Host, Prop, State} from '@stencil/core';\n// import {Component, Event, EventEmitter, h, Host, Prop, State} from '@stencil/core';\n\n/**\n * Displays a simple help icon. Upon hover or focus, a tooltip will be displayed with help text.\n */\n@Component({\n  tag: 'verdocs-toolbar-icon',\n  styleUrl: 'verdocs-toolbar-icon.scss',\n  shadow: false,\n})\nexport class VerdocsToolbarIcon {\n  iconEl: HTMLDivElement;\n  tooltip: HTMLDivElement;\n  popperInstance: Instance;\n\n  /**\n   * Help text to display on hover/focus\n   */\n  @Prop() text: string = '';\n\n  /**\n   * SVG icon to display\n   */\n  @Prop() icon: string = '';\n\n  /**\n   * Triggered when the icon is pressed\n   */\n  // @Event({composed: true}) press: EventEmitter;\n\n  @State() containerId = `verdocs-toolbar-icon-${Math.random().toString(36).substring(2, 11)}`;\n\n  componentDidLoad() {\n    this.popperInstance = createPopper(this.iconEl, this.tooltip, {\n      // placement: 'top-end',\n      // modifiers: [{name: 'offset', options: {offset: [0, 10]}}],\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.popperInstance) {\n      this.popperInstance.destroy();\n      this.popperInstance = null;\n    }\n  }\n\n  show() {\n    this.tooltip?.setAttribute('data-show', '');\n    this.popperInstance?.update().catch(() => {});\n  }\n\n  hide() {\n    this.tooltip?.removeAttribute('data-show');\n  }\n\n  // handlePress() {\n  //   this.press?.emit();\n  // }\n\n  render() {\n    return (\n      <Host class={{}}>\n        <div\n          aria-describedby={this.containerId}\n          class=\"icon\"\n          innerHTML={this.icon}\n          onMouseEnter={() => this.show()}\n          onFocus={() => this.show()}\n          onMouseLeave={() => this.hide()}\n          onBlur={() => this.hide()}\n          ref={el => (this.iconEl = el as HTMLDivElement)}\n        />\n        <div id={this.containerId} role=\"tooltip\" class=\"tooltip\" data-popper-placement=\"bottom\" ref={el => (this.tooltip = el as HTMLDivElement)}>\n          {this.text}\n          <div data-popper-arrow=\"true\" class=\"arrow\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/dialogs/verdocs-initial-dialog/verdocs-initial-dialog.js

@@ -6,7 +6,6 @@ import { Host, h } from '@stencil/core';
 export class VerdocsInitialDialog {
   constructor() {
     this.initials = '';
-    this.open = false;
     this.fontLoaded = false;
     this.enteredInitials = '';
     this.mode = 'type';
@@ -54,12 +53,10 @@ export class VerdocsInitialDialog {
   }
   handleAdopt() {
     const data = this.canvasElement.toDataURL('image/png');
-    this.adopt.emit(data);
-    this.open = false;
+    this.next.emit(data);
   }
   handleCancel() {
     this.cancel.emit();
-    this.open = false;
   }
   /*
   selColor(hex: string) {
@@ -219,7 +216,7 @@ export class VerdocsInitialDialog {
   }
    */
   render() {
-    return (h(Host, { class: { open: this.open } }, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "heading" }, "Create Your Initial"), h("div", { class: "content" }, h("verdocs-text-input", { placeholder: "Initials...", label: "Initials", value: this.enteredInitials, onInput: e => this.handleNameChange(e) }), h("div", { class: "as-shown" }, "As shown on driver's license or govt. ID card."), h("div", { class: "tabs" }, h("div", { class: { tab: true, active: this.mode === 'type' }, onClick: () => (this.mode = 'type') }, "Type"), h("div", { class: { tab: true, active: this.mode === 'draw' }, onClick: () => (this.mode = 'draw') }, "Draw")), this.fontLoaded ? h("canvas", { ref: el => (this.canvasElement = el) }) : h("div", { style: { display: 'none' } }), h("div", { class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), h("div", { class: "buttons" }, h("verdocs-button", { label: "CANCEL", variant: "outline", onPress: () => this.handleCancel() }), h("verdocs-button", { label: "Adopt & Sign", onPress: () => this.handleAdopt() })))))));
+    return (h(Host, null, h("div", { class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { class: "dialog" }, h("div", { class: "heading" }, "Create Your Initial"), h("div", { class: "content" }, h("verdocs-text-input", { placeholder: "Initials...", label: "Initials", value: this.enteredInitials, onInput: e => this.handleNameChange(e) }), h("div", { class: "as-shown" }, "As shown on driver's license or govt. ID card."), this.fontLoaded ? h("canvas", { ref: el => (this.canvasElement = el) }) : h("div", { style: { display: 'none' } }), h("div", { class: "disclaimer" }, "By clicking Adopt, I agree that the signature will be the electronic representation of my signature for all purposes when I (or my agent) use them on documents, including legally binding contracts \u2014 just the same as a pen-and-paper signature or initial."), h("div", { class: "buttons" }, h("verdocs-button", { label: "CANCEL", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "Adopt & Sign", onClick: () => this.handleAdopt() })))))));
   }
   static get is() { return "verdocs-initial-dialog"; }
   static get originalStyleUrls() {
@@ -251,24 +248,6 @@ export class VerdocsInitialDialog {
         "attribute": "initials",
         "reflect": false,
         "defaultValue": "''"
-      },
-      "open": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the dialog is currently being displayed. This allows it to be added to the DOM before being displayed."
-        },
-        "attribute": "open",
-        "reflect": false,
-        "defaultValue": "false"
       }
     };
   }
@@ -281,8 +260,8 @@ export class VerdocsInitialDialog {
   }
   static get events() {
     return [{
-        "method": "adopt",
-        "name": "adopt",
+        "method": "next",
+        "name": "next",
         "bubbles": true,
         "cancelable": true,
         "composed": true,