@verdocs/web-sdk 5.0.67 → 5.0.68

package/dist/verdocs-web-sdk/p-9b1b273c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["verdocsOrganizationCardCss","BusinessIcon","VerdocsOrganizationCard","constructor","hostRef","this","hovered","onMouseOver","onMouseOut","render","console","log","organization","thumbnail_url","fallbackIcon","portalId","id","h","Host","key","class","src","alt","innerHTML","_a","name","anchor","style","display","full_logo_url","_b","_c","format","Date","_d","created_at","undefined","url","href","_e","target","rel","_f","verdocsPortalCss","Z_INDEX","VerdocsPortal","moved","voffset","handleScroll","calculatePosition","handleResize","handleClick","e","closest","element","contains","clickAway","emit","document","querySelectorAll","forEach","el","remove","calculateLeft","anchorEl","getElementById","anchorRect","getBoundingClientRect","rightOfViewportWithScroll","documentElement","clientWidth","scrollLeft","leftOfPopup","Math","max","left","popupWidth","offsetWidth","offRightEdge","calculateTop","bottomOfViewportWithScroll","clientHeight","scrollTop","topOfPopup","bottom","popupHeight","offsetHeight","offBottomEdge","height","portal","top","componentWillLoad","createElement","setAttribute","zIndex","position","className","body","append","componentDidLoad","appendChild","disconnectedCallback","ref"],"sources":["src/components/controls/verdocs-organization-card/verdocs-organization-card.scss?tag=verdocs-organization-card","src/components/controls/verdocs-organization-card/verdocs-organization-card.tsx","src/components/controls/verdocs-portal/verdocs-portal.scss?tag=verdocs-portal","src/components/controls/verdocs-portal/verdocs-portal.tsx"],"sourcesContent":["@import '../../../theme.scss';\n\nverdocs-organization-card {\n  font-family: $primary-font;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border: 1px solid $light-border-color;\n  background: #ffffff;\n  border-radius: 8px;\n  padding: 7px 15px;\n\n  .icon {\n    flex: 0;\n    height: 24px;\n    width: 24px;\n    margin: 0 14px 0 0;\n\n    svg {\n      fill: $icon-color;\n      height: 24px;\n      width: 24px;\n    }\n  }\n\n  .content {\n    margin-top: 2px;\n  }\n}\n\n.verdocs-org-card-popup {\n  font-family: $primary-font;\n  background: #ffffff;\n  border-radius: 10px;\n  width: 326px;\n  padding: 20px 40px 0 40px;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  border: 1px solid $light-border-color;\n\n  .popup-header-with-logo {\n    display: flex;\n    flex: 0;\n    gap: 20px;\n    flex-direction: column;\n    margin: 0 0 20px 0;\n    font-size: 21px;\n    line-height: 16px;\n    color: $secondary-color;\n\n    img {\n      max-width: 300px;\n      max-height: 50px;\n    }\n  }\n\n  .popup-header {\n    display: flex;\n    flex: 0;\n    gap: 20px;\n    flex-direction: row;\n    align-items: flex-end;\n    margin: 0 0 20px 0;\n    font-size: 21px;\n    line-height: 16px;\n    color: $secondary-color;\n  }\n\n  .popup-body {\n    display: flex;\n    flex-direction: column;\n    font-size: 14px;\n    text-transform: uppercase;\n  }\n\n  .status {\n    transform: scale(1.5);\n    width: 24px;\n    height: 24px;\n  }\n\n  .field {\n    margin: 0 0 20px 0;\n\n    strong {\n      color: $label-color-very-light;\n      display: block;\n      margin: 0 0 5px 0;\n    }\n\n    a {\n      color: $verdocs-purple;\n      text-transform: uppercase;\n    }\n  }\n}\n","import {format} from 'date-fns';\nimport {Component, Prop, h, Host, Listen, State} from '@stencil/core';\nimport type {IOrganization} from '@verdocs/js-sdk';\n\n// TODO: See what was done in Storybook. Move all SVG icons to a common file that both projects can share\n//  and reduce duplication between components for re-used icons. Also bring icons into Figma for reuse there.\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 * ```ts\n * <verdocs-organization-card organization={organization} />\n * ```\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  @State()\n  hovered: boolean = false;\n\n  @Listen('mouseover')\n  onMouseOver() {\n    this.hovered = true;\n  }\n\n  @Listen('mouseout')\n  onMouseOut() {\n    this.hovered = false;\n  }\n\n  render() {\n    console.log('Rendering org card', this.organization.thumbnail_url, this.organization);\n    const fallbackIcon = BusinessIcon;\n    const portalId = `verdocs-org-card-${this.organization.id}`;\n\n    return (\n      <Host id={portalId}>\n        {this.organization.thumbnail_url ? <img class=\"icon\" src={this.organization.thumbnail_url} alt=\"Logo\" /> : <span class=\"icon\" innerHTML={fallbackIcon} />}\n\n        <span class=\"content\">{this.organization?.name}</span>\n\n        <verdocs-portal anchor={portalId}>\n          <div class=\"verdocs-org-card-popup\" style={{display: this.hovered ? 'block' : 'none'}}>\n            {this.organization.full_logo_url ? (\n              <div class=\"popup-header-with-logo\">\n                <img src={this.organization.full_logo_url} alt=\"Logo\" />\n                <div class=\"title\">{this.organization?.name}</div>\n              </div>\n            ) : (\n              <div class=\"popup-header\">\n                <span class=\"status\">\n                  <span class=\"icon\" innerHTML={fallbackIcon} />\n                </span>\n                <span class=\"title\">{this.organization?.name}</span>\n              </div>\n            )}\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        </verdocs-portal>\n      </Host>\n    );\n  }\n}\n","@import '../../../theme.scss';\n\nverdocs-portal {\n}\n","import {Component, EventEmitter, h, Host, Listen, Prop, Event} from '@stencil/core';\n\nconst Z_INDEX = '10001';\n\n/**\n * Display a child component in a \"portal\", popping it out of the main DOM tree\n * to allow it to escape the bounds set by its parent.\n * @credit https://github.com/tomas-teston/stencil-portal for the basic\n * technique. This has been altered in a few ways to make it more friendly\n * to cases where there may be multiple portals on the page and provide more\n * alignment options for the child to be displayed.\n *\n * ```ts\n * <div style=\"padding: 40px\">\n *     <div id=\"sample-tooltip\" style=\"border: 1px solid green; padding: 3px 10px;\">\n *       Tooltip Anchor\n *       <verdocs-portal anchor=\"sample-tooltip\" .align=${align} .voffset=${voffset}>\n *         <div style=\"border: 1px solid red; padding: 3px 10px;\">Tooltip</div>\n *       </verdocs-portal>\n *     </div>\n *   </div>\n * ```\n */\n@Component({\n  tag: 'verdocs-portal',\n  styleUrl: 'verdocs-portal.scss',\n  shadow: false,\n})\nexport class VerdocsPortal {\n  private portal: HTMLElement;\n  private element: HTMLElement;\n  private moved: boolean = false;\n\n  /**\n   * Unique ID of the parent element to anchor to.\n   */\n  @Prop() anchor: string;\n\n  /**\n   * Vertical offset from the parent.\n   */\n  @Prop() voffset: number = 0;\n\n  @Event() clickAway: EventEmitter<void>;\n\n  @Listen('scroll', {target: 'window', capture: true})\n  handleScroll() {\n    this.calculatePosition();\n  }\n\n  @Listen('resize', {target: 'window'})\n  handleResize() {\n    this.calculatePosition();\n  }\n\n  @Listen('click', {target: 'document'})\n  handleClick(e) {\n    const closest = e.target.closest('.verdocs-portal');\n    if (!this.element.contains(e.target) && !closest) {\n      this.clickAway?.emit();\n    }\n\n    // Temporary hack to dismiss portals-in-portals, which right now is pretty much just\n    // multiselect.\n    document.querySelectorAll('.verdocs-multiselect-dropdown').forEach(el => el.remove());\n  }\n\n  private calculateLeft() {\n    const anchorEl = document.getElementById(this.anchor);\n    if (!anchorEl) return 0;\n\n    const anchorRect = anchorEl.getBoundingClientRect();\n\n    const rightOfViewportWithScroll = document.documentElement.clientWidth + document.documentElement.scrollLeft;\n    const leftOfPopup = Math.max(anchorRect.left, 0);\n    // Old centering logic, disabled temporarily\n    //    Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);\n    // Old right-align logic, disabled temporarily\n    //    Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);\n    const popupWidth = this.element?.offsetWidth || 400;\n    const offRightEdge = leftOfPopup + popupWidth > rightOfViewportWithScroll;\n\n    return offRightEdge ? rightOfViewportWithScroll - popupWidth - 20 : leftOfPopup;\n  }\n\n  private calculateTop() {\n    const anchorEl = document.getElementById(this.anchor);\n    if (!anchorEl) return 0;\n\n    const anchorRect = anchorEl.getBoundingClientRect();\n\n    const bottomOfViewportWithScroll = document.documentElement.clientHeight + document.documentElement.scrollTop;\n    const topOfPopup = anchorRect.bottom + this.voffset + document.documentElement.scrollTop;\n    const popupHeight = this.element?.offsetHeight || 300;\n    const offBottomEdge = topOfPopup + popupHeight > bottomOfViewportWithScroll;\n\n    return offBottomEdge ? topOfPopup - popupHeight - anchorRect.height : topOfPopup;\n  }\n\n  private calculatePosition() {\n    this.portal.style.top = `${this.calculateTop()}px`;\n    this.portal.style.left = `${this.calculateLeft()}px`;\n  }\n\n  componentWillLoad() {\n    const id = `${this.anchor}-portal`;\n    document.getElementById(id)?.remove();\n\n    this.portal = document.createElement('div');\n    this.portal.setAttribute('id', id);\n    this.portal.style.zIndex = Z_INDEX;\n    this.portal.style.position = 'absolute';\n    this.portal.className = 'verdocs-portal-wrapper';\n    document.body.append(this.portal);\n  }\n\n  componentDidLoad() {\n    this.portal.appendChild(this.element);\n    this.calculatePosition();\n  }\n\n  disconnectedCallback() {\n    this.moved ? this.portal.remove() : (this.moved = true);\n  }\n\n  render() {\n    return (\n      <Host ref={el => (this.element = el)} class=\"verdocs-portal\">\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}