@verdocs/web-sdk 6.2.9 → 6.3.2

package/dist/components/{p-Opf3i5hz.js.map → p-DJ98c2L8.js.map}

@@ -1 +1 @@
-{"file":"p-Opf3i5hz.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-quick-filter/verdocs-quick-filter.scss?tag=verdocs-quick-filter","src/components/controls/verdocs-quick-filter/verdocs-quick-filter.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-quick-filter {\n  position: relative;\n  font-family: $primary-font;\n\n  .control {\n    outline: 0;\n    height: 34px;\n    display: flex;\n    cursor: pointer;\n    border-radius: 4px;\n    align-items: center;\n    flex-direction: row;\n    box-sizing: border-box;\n    background: $verdocs-grey-4;\n    transition: all 100ms ease 0s;\n    border: 1px solid $verdocs-bg-1;\n  }\n\n  .title {\n    padding: 0 8px;\n    font-size: 14px;\n    max-width: 100%;\n    overflow: hidden;\n    color: $label-color;\n    white-space: nowrap;\n    box-sizing: border-box;\n    text-overflow: ellipsis;\n\n    .prefix {\n      display: inline;\n      font-weight: 700;\n      margin: 0 7px 0 0;\n      color: $secondary-color;\n    }\n  }\n\n  .arrow {\n    width: 32px;\n    height: 32px;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    align-items: center;\n    display: inline-flex;\n    justify-content: center;\n    background: $verdocs-grey-4;\n    transition: color 150ms ease 0s;\n\n    svg {\n      transition: 0.3s;\n      fill: $verdocs-bg-1;\n    }\n  }\n\n  .separator {\n    width: 1px;\n    display: block;\n    margin-top: 8px;\n    margin-bottom: 8px;\n    align-self: stretch;\n    box-sizing: border-box;\n    background-color: $verdocs-bg-1;\n  }\n\n  .items {\n    display: none;\n    z-index: 10000;\n    position: absolute;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px;\n  }\n\n  .items[data-show] {\n    display: block;\n  }\n\n  .option {\n    width: 100%;\n    border: none;\n    display: block;\n    font-size: 14px;\n    text-align: left;\n    background: none;\n    padding: 10px 20px;\n    color: $verdocs-bg-5;\n  }\n\n  .option:hover {\n    cursor: pointer;\n    background: #4c56cb3f;\n  }\n\n  .option[disabled] {\n    color: $light-disabled-color;\n  }\n\n  .option[disabled]:hover {\n    cursor: inherit;\n    background: transparent;\n    color: $light-disabled-color;\n  }\n\n  &.open {\n    .items {\n      display: block;\n    }\n\n    .arrow svg {\n      transform: scaleY(-1);\n    }\n  }\n}\n","import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, Element, State, h, Event, EventEmitter} from '@stencil/core';\nimport {renderedTextWidth} from '../../../utils/utils';\n\nconst DropdownArrow = `<svg height=\"20\" width=\"20\" viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\" class=\"css-8mmkcg\"><path d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"></path></svg>`;\n\nexport interface IFilterOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu of quick filter options.\n *\n * ```ts\n * <verdocs-quick-filter options={[...options]} value={1} label=\"Filter\" placeholder=\"All\" />\n * ```\n */\n@Component({\n  tag: 'verdocs-quick-filter',\n  styleUrl: 'verdocs-quick-filter.scss',\n})\nexport class VerdocsQuickFilter {\n  @Element()\n  el: HTMLElement;\n\n  private dropdownButton?: HTMLElement;\n  private dropdownMenu?: HTMLDivElement;\n  private popper?: Instance;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IFilterOption[] = [];\n\n  @Prop()\n  label: string = 'Filter';\n\n  @Prop({reflect: true, mutable: true})\n  value: string = '';\n\n  @Prop()\n  placeholder: string = 'Select...';\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<IFilterOption>;\n\n  @State() open: boolean;\n\n  // We need to do this to reliably disconnect the click-away listener\n  clickListenerSymbol = new AbortController();\n  componentDidLoad() {\n    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [-1, 14]}}]});\n\n    window.addEventListener('click', this.clickListener.bind(this), {signal: this.clickListenerSymbol.signal});\n  }\n\n  disconnectedCallback() {\n    this.clickListenerSymbol.abort();\n  }\n\n  clickListener(e: any) {\n    const outside = !(e.target == this.el || this.el.contains(e.target));\n    if (outside) {\n      this.hide();\n    }\n  }\n\n  handleSelectOption(e: any, option: IFilterOption) {\n    e.stopPropagation();\n    this.optionSelected.emit(option);\n    this.value = option.value;\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.open = true;\n    this.dropdownMenu.setAttribute('data-show', '');\n    this.dropdownMenu.removeAttribute('aria-hidden');\n\n    this.popper\n      ?.setOptions(options => ({\n        ...options,\n        modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n      }))\n      .catch(() => {});\n\n    this.popper?.update().catch(() => {});\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.open) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.open = false;\n    this.dropdownMenu.removeAttribute('data-show');\n    this.dropdownMenu.setAttribute('aria-hidden', 'true');\n    this.popper\n      ?.setOptions(options => ({\n        ...options,\n        modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n      }))\n      .catch(() => {});\n  }\n\n  render() {\n    const selectedOption = this.options?.find(option => option.value === this.value);\n    const longestOption = this.options?.reduce((prev, curr) => (prev.label.length > curr.label.length ? prev : curr));\n    const longestLabelWidth = renderedTextWidth(longestOption?.label || 'FILLER', '14px Inter, Barlow, sans-serif');\n    const prefixWidth = renderedTextWidth(this.label, '14px Inter, Barlow, sans-serif');\n    const minWidth = `${longestLabelWidth + prefixWidth + 40}px`;\n\n    return (\n      <Host class={{open: !!this.open}} style={{minWidth, display: 'inline-block'}}>\n        <div class=\"control\" onClick={e => this.toggleDropdown(e)} onBlur={e => this.handleHideDropdown(e)}>\n          <div class=\"title\" ref={el => (this.dropdownButton = el as HTMLElement)}>\n            <span class=\"prefix\">{this.label}:</span>\n            {selectedOption ? selectedOption.label : this.placeholder}\n          </div>\n\n          <div style={{flex: '1'}} />\n\n          <div class=\"separator\" />\n\n          <div class=\"arrow\" innerHTML={DropdownArrow} aria-label=\"Open Menu\" />\n        </div>\n\n        <div class=\"items\" aria-hidden={!this.open} ref={el => (this.dropdownMenu = el as HTMLDivElement)} style={{minWidth}}>\n          {this.options?.map(option =>\n            option.label ? (\n              <button onClick={e => this.handleSelectOption(e, option)} class={`option ${option.value === this.value ? 'selected' : ''}`} disabled={option.disabled}>\n                {option.label}\n              </button>\n            ) : (\n              <div class=\"separator\" />\n            ),\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DJ98c2L8.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/controls/verdocs-quick-filter/verdocs-quick-filter.scss?tag=verdocs-quick-filter","src/components/controls/verdocs-quick-filter/verdocs-quick-filter.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-quick-filter {\n  position: relative;\n  font-family: $primary-font;\n\n  .control {\n    outline: 0;\n    height: 34px;\n    display: flex;\n    cursor: pointer;\n    border-radius: 4px;\n    align-items: center;\n    flex-direction: row;\n    box-sizing: border-box;\n    background: $verdocs-grey-4;\n    transition: all 100ms ease 0s;\n    border: 1px solid $verdocs-bg-1;\n  }\n\n  .title {\n    padding: 0 8px;\n    font-size: 14px;\n    max-width: 100%;\n    overflow: hidden;\n    color: $label-color;\n    white-space: nowrap;\n    box-sizing: border-box;\n    text-overflow: ellipsis;\n\n    .prefix {\n      display: inline;\n      font-weight: 700;\n      margin: 0 7px 0 0;\n      color: $secondary-color;\n    }\n  }\n\n  .arrow {\n    width: 32px;\n    height: 32px;\n    border: none;\n    outline: none;\n    cursor: pointer;\n    align-items: center;\n    display: inline-flex;\n    justify-content: center;\n    background: $verdocs-grey-4;\n    transition: color 150ms ease 0s;\n\n    svg {\n      transition: 0.3s;\n      fill: $verdocs-bg-1;\n    }\n  }\n\n  .separator {\n    width: 1px;\n    display: block;\n    margin-top: 8px;\n    margin-bottom: 8px;\n    align-self: stretch;\n    box-sizing: border-box;\n    background-color: $verdocs-bg-1;\n  }\n\n  .items {\n    display: none;\n    z-index: 10000;\n    position: absolute;\n    border-radius: 4px;\n    background: $verdocs-grey-4;\n    box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px;\n  }\n\n  .items[data-show] {\n    display: block;\n  }\n\n  .option {\n    width: 100%;\n    border: none;\n    display: block;\n    font-size: 14px;\n    text-align: left;\n    background: none;\n    padding: 10px 20px;\n    color: $verdocs-bg-5;\n  }\n\n  .option:hover {\n    cursor: pointer;\n    background: #4c56cb3f;\n  }\n\n  .option[disabled] {\n    color: $light-disabled-color;\n  }\n\n  .option[disabled]:hover {\n    cursor: inherit;\n    background: transparent;\n    color: $light-disabled-color;\n  }\n\n  &.open {\n    .items {\n      display: block;\n    }\n\n    .arrow svg {\n      transform: scaleY(-1);\n    }\n  }\n}\n","import {Host} from '@stencil/core';\nimport {createPopper, Instance} from '@popperjs/core';\nimport {Component, Prop, Element, State, h, Event, EventEmitter} from '@stencil/core';\nimport {renderedTextWidth} from '../../../utils/utils';\n\nconst DropdownArrow = `<svg height=\"20\" width=\"20\" viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\" class=\"css-8mmkcg\"><path d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"></path></svg>`;\n\nexport interface IFilterOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\n/**\n * Display a drop-down menu of quick filter options.\n *\n * ```ts\n * <verdocs-quick-filter options={[...options]} value={1} label=\"Filter\" placeholder=\"All\" />\n * ```\n */\n@Component({\n  tag: 'verdocs-quick-filter',\n  styleUrl: 'verdocs-quick-filter.scss',\n})\nexport class VerdocsQuickFilter {\n  @Element()\n  el: HTMLElement;\n\n  private dropdownButton?: HTMLElement;\n  private dropdownMenu?: HTMLDivElement;\n  private popper?: Instance;\n\n  /**\n   * The menu options to display.\n   */\n  @Prop() options: IFilterOption[] = [];\n\n  @Prop()\n  label: string = 'Filter';\n\n  @Prop({reflect: true, mutable: true})\n  value: string = '';\n\n  @Prop()\n  placeholder: string = 'Select...';\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<IFilterOption>;\n\n  @State() open: boolean;\n\n  // We need to do this to reliably disconnect the click-away listener\n  clickListenerSymbol = new AbortController();\n  componentDidLoad() {\n    this.popper = createPopper(this.dropdownButton, this.dropdownMenu, {placement: 'bottom-start', modifiers: [{name: 'offset', options: {offset: [-1, 14]}}]});\n\n    window.addEventListener('click', this.clickListener.bind(this), {signal: this.clickListenerSymbol.signal});\n  }\n\n  disconnectedCallback() {\n    this.clickListenerSymbol.abort();\n  }\n\n  clickListener(e: any) {\n    const outside = !(e.target == this.el || this.el.contains(e.target));\n    if (outside) {\n      this.hide();\n    }\n  }\n\n  handleSelectOption(e: any, option: IFilterOption) {\n    e.stopPropagation();\n    this.optionSelected.emit(option);\n    this.value = option.value;\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.open = true;\n    this.dropdownMenu.setAttribute('data-show', '');\n    this.dropdownMenu.removeAttribute('aria-hidden');\n\n    this.popper\n      ?.setOptions(options => ({\n        ...options,\n        modifiers: [...options.modifiers, {name: 'eventListeners', enabled: true}],\n      }))\n      .catch(() => {});\n\n    this.popper?.update().catch(() => {});\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.open) {\n      this.hide();\n    } else {\n      this.showDropdown();\n    }\n  }\n\n  hide() {\n    this.open = false;\n    this.dropdownMenu.removeAttribute('data-show');\n    this.dropdownMenu.setAttribute('aria-hidden', 'true');\n    this.popper\n      ?.setOptions(options => ({\n        ...options,\n        modifiers: [...options.modifiers, {name: 'eventListeners', enabled: false}],\n      }))\n      .catch(() => {});\n  }\n\n  render() {\n    const selectedOption = this.options?.find(option => option.value === this.value);\n    const longestOption = this.options?.reduce((prev, curr) => (prev.label.length > curr.label.length ? prev : curr));\n    const longestLabelWidth = renderedTextWidth(longestOption?.label || 'FILLER', '14px Inter, Barlow, sans-serif');\n    const prefixWidth = renderedTextWidth(this.label, '14px Inter, Barlow, sans-serif');\n    const minWidth = `${longestLabelWidth + prefixWidth + 40}px`;\n\n    return (\n      <Host class={{open: !!this.open}} style={{minWidth, display: 'inline-block'}}>\n        <div class=\"control\" onClick={e => this.toggleDropdown(e)} onBlur={e => this.handleHideDropdown(e)}>\n          <div class=\"title\" ref={el => (this.dropdownButton = el as HTMLElement)}>\n            <span class=\"prefix\">{this.label}:</span>\n            {selectedOption ? selectedOption.label : this.placeholder}\n          </div>\n\n          <div style={{flex: '1'}} />\n\n          <div class=\"separator\" />\n\n          <div class=\"arrow\" innerHTML={DropdownArrow} aria-label=\"Open Menu\" />\n        </div>\n\n        <div class=\"items\" aria-hidden={!this.open} ref={el => (this.dropdownMenu = el as HTMLDivElement)} style={{minWidth}}>\n          {this.options?.map(option =>\n            option.label ? (\n              <button onClick={e => this.handleSelectOption(e, option)} class={`option ${option.value === this.value ? 'selected' : ''}`} disabled={option.disabled}>\n                {option.label}\n              </button>\n            ) : (\n              <div class=\"separator\" />\n            ),\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DaDjn3gR.js → p-DLRzhboq.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-9up2BmHp.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-CUAGH_8P.js';
 import { formatFullName } from '@verdocs/js-sdk';
 import { c as createPopper } from './p-BfP9ezJQ.js';
 
@@ -8179,11 +8179,11 @@ const VerdocsStatusIndicator = /*@__PURE__*/ proxyCustomElement(class VerdocsSta
         }
         const icon = this.getStatusIcon(status);
         const statusMessage = this.getStatusMessage(status);
-        return (h(Host, { key: 'b6062b0d24b951dfd92c5b86fb7649e0b8f7d6a3', ref: el => (this.summaryComponent = el), class: `${this.theme} ${this.size} ${this.envelope ? 'has-document' : ''}`, "aria-label": "Click to View Details", onClick: e => {
+        return (h(Host, { key: 'efa09a916006a3783d7acff21823b341b71e46a5', 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.envelope && this.toggleDropdown();
-            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: '302a9473ae5103296dbcfb16904c60e2f46753ff', class: "icon", innerHTML: icon }), h("span", { key: '51fda37f208f06a609395226ef61d31618e2b241', class: "content" }, statusMessage), h("div", { key: 'cc8cd90fb43445c72aa2a902ae4126f8a6106847', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: 'c9dc98c3d480025219c3368e961c522ca23d86f4', id: `${this.containerId}` }), this.recipientStatusIcons.map(icon => (h("span", { innerHTML: icon.icon, style: { position: 'absolute', top: `${icon.y}px`, left: `${icon.x}px` } }))))));
+            }, onBlur: e => this.envelope && this.handleHideDropdown(e) }, h("span", { key: 'f34d580672cf8552c22847a142f7194971bc0e2c', class: "icon", innerHTML: icon }), h("span", { key: '441fa7bc68e0a98a615bb852e9f0ecf21f3404c5', class: "content" }, statusMessage), h("div", { key: '10282914dd82d8f1ea6771164d198c21cc23ccd6', class: "detail-panel", ref: el => (this.detailPanel = el) }, h("div", { key: '05391d7210a873d72e64973d2efddfa6c1faefe8', 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 style() { return verdocsStatusIndicatorCss; }
 }, [256, "verdocs-status-indicator", {
@@ -8209,6 +8209,6 @@ function defineCustomElement() {
 }
 
 export { VerdocsStatusIndicator as V, defineCustomElement as d };
-//# sourceMappingURL=p-DaDjn3gR.js.map
+//# sourceMappingURL=p-DLRzhboq.js.map
 
-//# sourceMappingURL=p-DaDjn3gR.js.map
+//# sourceMappingURL=p-DLRzhboq.js.map