@verdocs/web-sdk 5.0.12 → 5.0.14

package/dist/esm-es5/verdocs-organization-card_2.entry.js

@@ -1 +1,2 @@
-import{r as registerInstance,h,H as Host,c as createEvent}from"./index-272d51a4.js";import{f as format}from"./format-b8602175.js";var verdocsOrganizationCardCss='@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-organization-card{font-family:"Inter", "Barlow", sans-serif;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:#ffffff;border-radius:8px;padding:7px 15px}verdocs-organization-card .icon{-ms-flex:0;flex:0;height:24px;width:24px;margin:0 14px 0 0}verdocs-organization-card .icon svg{fill:#aeb4bf;height:24px;width:24px}verdocs-organization-card .content{margin-top:2px}.verdocs-org-card-popup{font-family:"Inter", "Barlow", sans-serif;background:#ffffff;border-radius:10px;width:326px;padding:20px 40px 0 40px;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border:1px solid #cccccc}.verdocs-org-card-popup .popup-header-with-logo{display:-ms-flexbox;display:flex;-ms-flex:0;flex:0;gap:20px;-ms-flex-direction:column;flex-direction:column;margin:0 0 20px 0;font-size:21px;line-height:16px;color:#4c56cb}.verdocs-org-card-popup .popup-header-with-logo img{max-width:300px;max-height:50px}.verdocs-org-card-popup .popup-header{display:-ms-flexbox;display:flex;-ms-flex:0;flex:0;gap:20px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end;margin:0 0 20px 0;font-size:21px;line-height:16px;color:#4c56cb}.verdocs-org-card-popup .popup-body{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:14px;text-transform:uppercase}.verdocs-org-card-popup .status{-webkit-transform:scale(1.5);transform:scale(1.5);width:24px;height:24px}.verdocs-org-card-popup .field{margin:0 0 20px 0}.verdocs-org-card-popup .field strong{color:#7b7b9a;display:block;margin:0 0 5px 0}.verdocs-org-card-popup .field a{color:#654dcb;text-transform:uppercase}';var VerdocsOrganizationCardStyle0=verdocsOrganizationCardCss;var BusinessIcon='<svg xmlns="http://www.w3.org/2000/svg"  focusable="false" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path></svg>';var VerdocsOrganizationCard=function(){function o(o){registerInstance(this,o);this.organization=undefined;this.hovered=false}o.prototype.onMouseOver=function(){this.hovered=true};o.prototype.onMouseOut=function(){this.hovered=false};o.prototype.render=function(){var o,r,e,a,i,s;console.log("Rendering org card",this.organization.thumbnail_url,this.organization);var c=BusinessIcon;var t="verdocs-org-card-".concat(this.organization.id);return h(Host,{key:"4b97ef1ea4b3153e59861956910ba3bf86935ac9",id:t},this.organization.thumbnail_url?h("img",{class:"icon",src:this.organization.thumbnail_url,alt:"Logo"}):h("span",{class:"icon",innerHTML:c}),h("span",{key:"7f238a3d942b19ac1b0f15eb4c4572f80cdfbac8",class:"content"},(o=this.organization)===null||o===void 0?void 0:o.name),h("verdocs-portal",{key:"faba8d4862b600a36dfda1a1c2af1cc5730d73db",anchor:t},h("div",{key:"5ea6d5ad24911cb38aef6144c10419b93767eb5d",class:"verdocs-org-card-popup",style:{display:this.hovered?"block":"none"}},this.organization.full_logo_url?h("div",{class:"popup-header-with-logo"},h("img",{src:this.organization.full_logo_url,alt:"Logo"}),h("div",{class:"title"},(r=this.organization)===null||r===void 0?void 0:r.name)):h("div",{class:"popup-header"},h("span",{class:"status"},h("span",{class:"icon",innerHTML:c})),h("span",{class:"title"},(e=this.organization)===null||e===void 0?void 0:e.name)),h("div",{key:"0e5e9bfcd06e8658955f44cfcab2b05a1b130a4c",class:"popup-body"},h("div",{key:"09fecd4216b3b333ee685040fe84813f065fa2ef",class:"field"},h("strong",{key:"922a1d90657e1d1c1349b55edf7a1c3e69c45063"},"Joined"),format(new Date(((a=this.organization)===null||a===void 0?void 0:a.created_at)||undefined),"LLL d, Y")),this.organization.url&&h("div",{key:"04c399ba5a851f2ac82d04ae789b70433f3b296a",class:"field"},h("strong",{key:"e24cbe31601ea892c524991b0ddc4c64f6908df8"},"Website"),h("a",{key:"26fc1252aebc78eb84228de77092e1cfb650ebfa",href:(i=this.organization)===null||i===void 0?void 0:i.url,target:"_blank",rel:"nofollow"},(s=this.organization)===null||s===void 0?void 0:s.url))))))};return o}();VerdocsOrganizationCard.style=VerdocsOrganizationCardStyle0;var verdocsPortalCss="@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";var VerdocsPortalStyle0=verdocsPortalCss;var Z_INDEX="10001";var VerdocsPortal=function(){function o(o){registerInstance(this,o);this.clickAway=createEvent(this,"clickAway",7);this.moved=false;this.anchor=undefined;this.voffset=0}o.prototype.handleScroll=function(){this.calculatePosition()};o.prototype.handleResize=function(){this.calculatePosition()};o.prototype.handleClick=function(o){var r;if(!this.element.contains(o.target)){(r=this.clickAway)===null||r===void 0?void 0:r.emit()}};o.prototype.calculateLeft=function(){var o;var r=document.getElementById(this.anchor);if(!r)return 0;var e=r.getBoundingClientRect();var a=document.documentElement.clientWidth+document.documentElement.scrollLeft;var i=Math.max(e.left,0);var s=((o=this.element)===null||o===void 0?void 0:o.offsetWidth)||400;var c=i+s>a;return c?a-s-20:i};o.prototype.calculateTop=function(){var o;var r=document.getElementById(this.anchor);if(!r)return 0;var e=r.getBoundingClientRect();var a=document.documentElement.clientHeight+document.documentElement.scrollTop;var i=e.bottom+this.voffset+document.documentElement.scrollTop;var s=((o=this.element)===null||o===void 0?void 0:o.offsetHeight)||300;var c=i+s>a;return c?i-s-e.height:i};o.prototype.calculatePosition=function(){this.portal.style.top="".concat(this.calculateTop(),"px");this.portal.style.left="".concat(this.calculateLeft(),"px")};o.prototype.componentWillLoad=function(){var o;var r="".concat(this.anchor,"-portal");(o=document.getElementById(r))===null||o===void 0?void 0:o.remove();this.portal=document.createElement("div");this.portal.setAttribute("id",r);this.portal.style.zIndex=Z_INDEX;this.portal.style.position="absolute";document.body.append(this.portal)};o.prototype.componentDidLoad=function(){this.portal.appendChild(this.element);this.calculatePosition()};o.prototype.disconnectedCallback=function(){this.moved?this.portal.remove():this.moved=true};o.prototype.render=function(){var o=this;return h(Host,{key:"a6baeca20a28ae94d4a9fab6e31dec45474cf887",ref:function(r){return o.element=r}},h("slot",{key:"e6a704a85b5208613aef1a3db3bf85adc8f60bf7"}))};return o}();VerdocsPortal.style=VerdocsPortalStyle0;export{VerdocsOrganizationCard as verdocs_organization_card,VerdocsPortal as verdocs_portal};
+import{r as registerInstance,h,H as Host,c as createEvent}from"./index-272d51a4.js";import{f as format}from"./format-b8602175.js";var verdocsOrganizationCardCss='@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-organization-card{font-family:"Inter", "Barlow", sans-serif;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border:1px solid #cccccc;background:#ffffff;border-radius:8px;padding:7px 15px}verdocs-organization-card .icon{-ms-flex:0;flex:0;height:24px;width:24px;margin:0 14px 0 0}verdocs-organization-card .icon svg{fill:#aeb4bf;height:24px;width:24px}verdocs-organization-card .content{margin-top:2px}.verdocs-org-card-popup{font-family:"Inter", "Barlow", sans-serif;background:#ffffff;border-radius:10px;width:326px;padding:20px 40px 0 40px;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border:1px solid #cccccc}.verdocs-org-card-popup .popup-header-with-logo{display:-ms-flexbox;display:flex;-ms-flex:0;flex:0;gap:20px;-ms-flex-direction:column;flex-direction:column;margin:0 0 20px 0;font-size:21px;line-height:16px;color:#4c56cb}.verdocs-org-card-popup .popup-header-with-logo img{max-width:300px;max-height:50px}.verdocs-org-card-popup .popup-header{display:-ms-flexbox;display:flex;-ms-flex:0;flex:0;gap:20px;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:end;align-items:flex-end;margin:0 0 20px 0;font-size:21px;line-height:16px;color:#4c56cb}.verdocs-org-card-popup .popup-body{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:14px;text-transform:uppercase}.verdocs-org-card-popup .status{-webkit-transform:scale(1.5);transform:scale(1.5);width:24px;height:24px}.verdocs-org-card-popup .field{margin:0 0 20px 0}.verdocs-org-card-popup .field strong{color:#7b7b9a;display:block;margin:0 0 5px 0}.verdocs-org-card-popup .field a{color:#654dcb;text-transform:uppercase}';var VerdocsOrganizationCardStyle0=verdocsOrganizationCardCss;var BusinessIcon='<svg xmlns="http://www.w3.org/2000/svg"  focusable="false" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path></svg>';var VerdocsOrganizationCard=function(){function o(o){registerInstance(this,o);this.organization=undefined;this.hovered=false}o.prototype.onMouseOver=function(){this.hovered=true};o.prototype.onMouseOut=function(){this.hovered=false};o.prototype.render=function(){var o,r,e,a,i,s;console.log("Rendering org card",this.organization.thumbnail_url,this.organization);var c=BusinessIcon;var t="verdocs-org-card-".concat(this.organization.id);return h(Host,{key:"4b97ef1ea4b3153e59861956910ba3bf86935ac9",id:t},this.organization.thumbnail_url?h("img",{class:"icon",src:this.organization.thumbnail_url,alt:"Logo"}):h("span",{class:"icon",innerHTML:c}),h("span",{key:"7f238a3d942b19ac1b0f15eb4c4572f80cdfbac8",class:"content"},(o=this.organization)===null||o===void 0?void 0:o.name),h("verdocs-portal",{key:"faba8d4862b600a36dfda1a1c2af1cc5730d73db",anchor:t},h("div",{key:"5ea6d5ad24911cb38aef6144c10419b93767eb5d",class:"verdocs-org-card-popup",style:{display:this.hovered?"block":"none"}},this.organization.full_logo_url?h("div",{class:"popup-header-with-logo"},h("img",{src:this.organization.full_logo_url,alt:"Logo"}),h("div",{class:"title"},(r=this.organization)===null||r===void 0?void 0:r.name)):h("div",{class:"popup-header"},h("span",{class:"status"},h("span",{class:"icon",innerHTML:c})),h("span",{class:"title"},(e=this.organization)===null||e===void 0?void 0:e.name)),h("div",{key:"0e5e9bfcd06e8658955f44cfcab2b05a1b130a4c",class:"popup-body"},h("div",{key:"09fecd4216b3b333ee685040fe84813f065fa2ef",class:"field"},h("strong",{key:"922a1d90657e1d1c1349b55edf7a1c3e69c45063"},"Joined"),format(new Date(((a=this.organization)===null||a===void 0?void 0:a.created_at)||undefined),"LLL d, Y")),this.organization.url&&h("div",{key:"04c399ba5a851f2ac82d04ae789b70433f3b296a",class:"field"},h("strong",{key:"e24cbe31601ea892c524991b0ddc4c64f6908df8"},"Website"),h("a",{key:"26fc1252aebc78eb84228de77092e1cfb650ebfa",href:(i=this.organization)===null||i===void 0?void 0:i.url,target:"_blank",rel:"nofollow"},(s=this.organization)===null||s===void 0?void 0:s.url))))))};return o}();VerdocsOrganizationCard.style=VerdocsOrganizationCardStyle0;var verdocsPortalCss="@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}";var VerdocsPortalStyle0=verdocsPortalCss;var Z_INDEX="10001";var VerdocsPortal=function(){function o(o){registerInstance(this,o);this.clickAway=createEvent(this,"clickAway",7);this.moved=false;this.anchor=undefined;this.voffset=0}o.prototype.handleScroll=function(){this.calculatePosition()};o.prototype.handleResize=function(){this.calculatePosition()};o.prototype.handleClick=function(o){var r;if(!this.element.contains(o.target)){(r=this.clickAway)===null||r===void 0?void 0:r.emit()}};o.prototype.calculateLeft=function(){var o;var r=document.getElementById(this.anchor);if(!r)return 0;var e=r.getBoundingClientRect();var a=document.documentElement.clientWidth+document.documentElement.scrollLeft;var i=Math.max(e.left,0);var s=((o=this.element)===null||o===void 0?void 0:o.offsetWidth)||400;var c=i+s>a;return c?a-s-20:i};o.prototype.calculateTop=function(){var o;var r=document.getElementById(this.anchor);if(!r)return 0;var e=r.getBoundingClientRect();var a=document.documentElement.clientHeight+document.documentElement.scrollTop;var i=e.bottom+this.voffset+document.documentElement.scrollTop;var s=((o=this.element)===null||o===void 0?void 0:o.offsetHeight)||300;var c=i+s>a;return c?i-s-e.height:i};o.prototype.calculatePosition=function(){this.portal.style.top="".concat(this.calculateTop(),"px");this.portal.style.left="".concat(this.calculateLeft(),"px")};o.prototype.componentWillLoad=function(){var o;var r="".concat(this.anchor,"-portal");(o=document.getElementById(r))===null||o===void 0?void 0:o.remove();this.portal=document.createElement("div");this.portal.setAttribute("id",r);this.portal.style.zIndex=Z_INDEX;this.portal.style.position="absolute";document.body.append(this.portal)};o.prototype.componentDidLoad=function(){this.portal.appendChild(this.element);this.calculatePosition()};o.prototype.disconnectedCallback=function(){this.moved?this.portal.remove():this.moved=true};o.prototype.render=function(){var o=this;return h(Host,{key:"a6baeca20a28ae94d4a9fab6e31dec45474cf887",ref:function(r){return o.element=r}},h("slot",{key:"e6a704a85b5208613aef1a3db3bf85adc8f60bf7"}))};return o}();VerdocsPortal.style=VerdocsPortalStyle0;export{VerdocsOrganizationCard as verdocs_organization_card,VerdocsPortal as verdocs_portal};
+//# sourceMappingURL=verdocs-organization-card_2.entry.js.map

package/dist/esm-es5/verdocs-organization-card_2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["verdocsOrganizationCardCss","VerdocsOrganizationCardStyle0","BusinessIcon","VerdocsOrganizationCard","prototype","onMouseOver","this","hovered","onMouseOut","render","console","log","organization","thumbnail_url","fallbackIcon","portalId","concat","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","VerdocsPortalStyle0","Z_INDEX","VerdocsPortal","moved","handleScroll","calculatePosition","handleResize","handleClick","e","element","contains","clickAway","emit","calculateLeft","anchorEl","document","getElementById","anchorRect","getBoundingClientRect","rightOfViewportWithScroll","documentElement","clientWidth","scrollLeft","leftOfPopup","Math","max","left","popupWidth","offsetWidth","offRightEdge","calculateTop","bottomOfViewportWithScroll","clientHeight","scrollTop","topOfPopup","bottom","voffset","popupHeight","offsetHeight","offBottomEdge","height","portal","top","componentWillLoad","remove","createElement","setAttribute","zIndex","position","body","append","componentDidLoad","appendChild","disconnectedCallback","_this","ref","el"],"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    if (!this.element.contains(e.target)) {\n      this.clickAway?.emit();\n    }\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    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)}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/esm-es5/verdocs-pagination_2.entry.js

@@ -1 +1,2 @@
-var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var i,r=1,t=arguments.length;r<t;r++){i=arguments[r];for(var o in i)if(Object.prototype.hasOwnProperty.call(i,o))e[o]=i[o]}return e};return __assign.apply(this,arguments)};var __spreadArray=this&&this.__spreadArray||function(e,i,r){if(r||arguments.length===2)for(var t=0,o=i.length,s;t<o;t++){if(s||!(t in i)){if(!s)s=Array.prototype.slice.call(i,0,t);s[t]=i[t]}}return e.concat(s||Array.prototype.slice.call(i))};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-272d51a4.js";import{integerSequence}from"@verdocs/js-sdk";import{i as renderedTextWidth}from"./utils-bd656c37.js";import{c as createPopper}from"./popper-0fbeff6d.js";import"./_commonjsHelpers-bdec4bbd.js";import"./Types-95d86a44.js";import"./format-b8602175.js";var verdocsPaginationCss='@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-pagination{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-family:"Inter", "Barlow", sans-serif}verdocs-pagination .page-button{height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;cursor:pointer;font-size:16px;font-weight:600;border-radius:4px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#33364b;border:1px solid #654dcb}verdocs-pagination .page-button svg{width:18px;height:18px}verdocs-pagination .page-button.selected{cursor:default;color:#ffffff;background:#654dcb}verdocs-pagination .ellipsis{width:38px;height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;line-height:32px;-ms-flex-pack:center;justify-content:center;color:#33364b}';var VerdocsPaginationStyle0=verdocsPaginationCss;var ChevronDoubleLeft='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" /></svg>';var ChevronDoubleRight='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" /></svg>';var VISIBLE_PAGES=5;var PageButton=function(e){var i=e.page,r=e.selected,t=e.onClick;var o;if(i==="first"){o=ChevronDoubleLeft}else if(i==="last"){o=ChevronDoubleRight}else{o=String(i+1)}return h("div",{class:"page-button ".concat(i===r?"selected":""),onClick:function(){return t(i)},innerHTML:o})};var VerdocsQuickFilter$1=function(){function e(e){registerInstance(this,e);this.selectPage=createEvent(this,"selectPage",7);this.selectedPage=0;this.itemCount=1;this.perPage=10}e.prototype.handleSelectPage=function(e){var i;this.selectedPage=e;(i=this.selectPage)===null||i===void 0?void 0:i.emit({selectedPage:e})};e.prototype.render=function(){var e=this;var i=Math.max(0,this.selectedPage-2);var r=this.itemCount>0?Math.ceil(this.itemCount/this.perPage):0;var t=integerSequence(0,Math.ceil(this.itemCount/this.perPage)).slice(i,i+VISIBLE_PAGES);return h(Host,{key:"2c6c7eaf7adf1f98dfb2ce2d804d360af53ddd95"},this.selectedPage>0&&h(PageButton,{key:"942a34679e4270fc767fd4f63659e103531b376d",page:"first",selected:this.selectedPage,onClick:function(){return e.handleSelectPage(0)}}),i>0&&h("div",{key:"7961f0803894b45de72528a5e3456b2bc343f0a5",class:"ellipsis"},"..."),t.map((function(i){return h(PageButton,{page:i,selected:e.selectedPage,onClick:function(i){return e.handleSelectPage(+i)}})})),this.selectedPage<r-1&&h("div",{key:"917a3fc286ddf919c36eb94e59b5847dc7aa90ee",class:"ellipsis"},"..."),this.selectedPage<r-1&&h(PageButton,{key:"59db51f1f4ae5c1878a218681c62cc3f9e621340",page:"last",selected:this.selectedPage,onClick:function(){return e.handleSelectPage(r-1)}}))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();VerdocsQuickFilter$1.style=VerdocsPaginationStyle0;var verdocsQuickFilterCss='@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-quick-filter{position:relative;font-family:"Inter", "Barlow", sans-serif}verdocs-quick-filter .control{outline:0;height:34px;display:-ms-flexbox;display:flex;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;background:#ffffff;-webkit-transition:all 100ms ease 0s;transition:all 100ms ease 0s;border:1px solid #cccccc}verdocs-quick-filter .title{padding:0 8px;font-size:14px;max-width:100%;overflow:hidden;color:#33364b;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;text-overflow:ellipsis}verdocs-quick-filter .title .prefix{display:inline;font-weight:700;margin:0 7px 0 0;color:#4c56cb}verdocs-quick-filter .arrow{width:32px;height:32px;border:none;outline:none;cursor:pointer;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;background:#ffffff;-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s}verdocs-quick-filter .arrow svg{-webkit-transition:0.3s;transition:0.3s;fill:#cccccc}verdocs-quick-filter .separator{width:1px;display:block;margin-top:8px;margin-bottom:8px;-ms-flex-item-align:stretch;align-self:stretch;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#cccccc}verdocs-quick-filter .items{display:none;z-index:10000;position:absolute;border-radius:4px;background:#ffffff;-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px;box-shadow:rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px}verdocs-quick-filter .items[data-show]{display:block}verdocs-quick-filter .option{width:100%;border:none;display:block;font-size:14px;text-align:left;background:none;padding:10px 20px;color:#1e2031}verdocs-quick-filter .option:hover{cursor:pointer;background:rgba(76, 86, 203, 0.2470588235)}verdocs-quick-filter .option[disabled]{color:#aaaaaa}verdocs-quick-filter .option[disabled]:hover{cursor:inherit;background:transparent;color:#aaaaaa}verdocs-quick-filter.open .items{display:block}verdocs-quick-filter.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1)}';var VerdocsQuickFilterStyle0=verdocsQuickFilterCss;var 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>';var VerdocsQuickFilter=function(){function e(e){registerInstance(this,e);this.optionSelected=createEvent(this,"optionSelected",7);this.clickListenerSymbol=new AbortController;this.options=[];this.label="Filter";this.value="";this.placeholder="Select...";this.open=undefined}e.prototype.componentDidLoad=function(){this.popper=createPopper(this.dropdownButton,this.dropdownMenu,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[-1,14]}}]});window.addEventListener("click",this.clickListener.bind(this),{signal:this.clickListenerSymbol.signal})};e.prototype.disconnectedCallback=function(){this.clickListenerSymbol.abort()};e.prototype.clickListener=function(e){var i=!(e.target==this.el||this.el.contains(e.target));if(i){this.hide()}};e.prototype.handleSelectOption=function(e,i){e.stopPropagation();this.optionSelected.emit(i);this.value=i.value;this.hide()};e.prototype.showDropdown=function(){var e,i;this.open=true;this.dropdownMenu.setAttribute("data-show","");this.dropdownMenu.removeAttribute("aria-hidden");(e=this.popper)===null||e===void 0?void 0:e.setOptions((function(e){return __assign(__assign({},e),{modifiers:__spreadArray(__spreadArray([],e.modifiers,true),[{name:"eventListeners",enabled:true}],false)})})).catch((function(){}));(i=this.popper)===null||i===void 0?void 0:i.update().catch((function(){}))};e.prototype.handleHideDropdown=function(e){var i,r;if(((i=e===null||e===void 0?void 0:e.target)===null||i===void 0?void 0:i.localName)==="button"&&((r=e===null||e===void 0?void 0:e.target)===null||r===void 0?void 0:r.className)==="arrow"){return}this.hide()};e.prototype.toggleDropdown=function(e){e.stopPropagation();if(this.open){this.hide()}else{this.showDropdown()}};e.prototype.hide=function(){var e;this.open=false;this.dropdownMenu.removeAttribute("data-show");this.dropdownMenu.setAttribute("aria-hidden","true");(e=this.popper)===null||e===void 0?void 0:e.setOptions((function(e){return __assign(__assign({},e),{modifiers:__spreadArray(__spreadArray([],e.modifiers,true),[{name:"eventListeners",enabled:false}],false)})})).catch((function(){}))};e.prototype.render=function(){var e=this;var i,r,t;var o=(i=this.options)===null||i===void 0?void 0:i.find((function(i){return i.value===e.value}));var s=(r=this.options)===null||r===void 0?void 0:r.reduce((function(e,i){return e.label.length>i.label.length?e:i}));var n=renderedTextWidth((s===null||s===void 0?void 0:s.label)||"FILLER","14px Inter, Barlow, sans-serif");var a=renderedTextWidth(this.label,"14px Inter, Barlow, sans-serif");var c="".concat(n+a+40,"px");return h(Host,{key:"63c979bc0e8b4b75f0608a7b5c11bf92de2375cc",class:{open:!!this.open},style:{minWidth:c,display:"inline-block"}},h("div",{key:"785aac3556deaac0bbf55d8eb1f52e846448b44d",class:"control",onClick:function(i){return e.toggleDropdown(i)},onBlur:function(i){return e.handleHideDropdown(i)}},h("div",{key:"521c951babae9d882402ffb94aeb4f40a3afe9c6",class:"title",ref:function(i){return e.dropdownButton=i}},h("span",{key:"66f15637c5bcaa84326b0360b1cf0b9eeb34cc19",class:"prefix"},this.label,":"),o?o.label:this.placeholder),h("div",{key:"8f5719750fd5fb40c8787d044904629ede1cb5a5",style:{flex:"1"}}),h("div",{key:"1f16f93487115760416fa9d7fa025e25da4e1cb9",class:"separator"}),h("div",{key:"bf485d08eccf8e960d161007b3b16517f494f85f",class:"arrow",innerHTML:DropdownArrow,"aria-label":"Open Menu"})),h("div",{key:"8842f5609144f401a51124501544f0fb6c4700c9",class:"items","aria-hidden":!this.open,ref:function(i){return e.dropdownMenu=i},style:{minWidth:c}},(t=this.options)===null||t===void 0?void 0:t.map((function(i){return i.label?h("button",{onClick:function(r){return e.handleSelectOption(r,i)},class:"option ".concat(i.value===e.value?"selected":""),disabled:i.disabled},i.label):h("div",{class:"separator"})}))))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();VerdocsQuickFilter.style=VerdocsQuickFilterStyle0;export{VerdocsQuickFilter$1 as verdocs_pagination,VerdocsQuickFilter as verdocs_quick_filter};
+var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var i,r=1,t=arguments.length;r<t;r++){i=arguments[r];for(var o in i)if(Object.prototype.hasOwnProperty.call(i,o))e[o]=i[o]}return e};return __assign.apply(this,arguments)};var __spreadArray=this&&this.__spreadArray||function(e,i,r){if(r||arguments.length===2)for(var t=0,o=i.length,s;t<o;t++){if(s||!(t in i)){if(!s)s=Array.prototype.slice.call(i,0,t);s[t]=i[t]}}return e.concat(s||Array.prototype.slice.call(i))};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-272d51a4.js";import{integerSequence}from"@verdocs/js-sdk";import{i as renderedTextWidth}from"./utils-bd656c37.js";import{c as createPopper}from"./popper-0fbeff6d.js";import"./_commonjsHelpers-bdec4bbd.js";import"./Types-95d86a44.js";import"./format-b8602175.js";var verdocsPaginationCss='@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-pagination{gap:8px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;font-family:"Inter", "Barlow", sans-serif}verdocs-pagination .page-button{height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;cursor:pointer;font-size:16px;font-weight:600;border-radius:4px;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#33364b;border:1px solid #654dcb}verdocs-pagination .page-button svg{width:18px;height:18px}verdocs-pagination .page-button.selected{cursor:default;color:#ffffff;background:#654dcb}verdocs-pagination .ellipsis{width:38px;height:38px;display:-ms-flexbox;display:flex;-ms-flex:0 0 38px;flex:0 0 38px;line-height:32px;-ms-flex-pack:center;justify-content:center;color:#33364b}';var VerdocsPaginationStyle0=verdocsPaginationCss;var ChevronDoubleLeft='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" /></svg>';var ChevronDoubleRight='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" /></svg>';var VISIBLE_PAGES=5;var PageButton=function(e){var i=e.page,r=e.selected,t=e.onClick;var o;if(i==="first"){o=ChevronDoubleLeft}else if(i==="last"){o=ChevronDoubleRight}else{o=String(i+1)}return h("div",{class:"page-button ".concat(i===r?"selected":""),onClick:function(){return t(i)},innerHTML:o})};var VerdocsQuickFilter$1=function(){function e(e){registerInstance(this,e);this.selectPage=createEvent(this,"selectPage",7);this.selectedPage=0;this.itemCount=1;this.perPage=10}e.prototype.handleSelectPage=function(e){var i;this.selectedPage=e;(i=this.selectPage)===null||i===void 0?void 0:i.emit({selectedPage:e})};e.prototype.render=function(){var e=this;var i=Math.max(0,this.selectedPage-2);var r=this.itemCount>0?Math.ceil(this.itemCount/this.perPage):0;var t=integerSequence(0,Math.ceil(this.itemCount/this.perPage)).slice(i,i+VISIBLE_PAGES);return h(Host,{key:"2c6c7eaf7adf1f98dfb2ce2d804d360af53ddd95"},this.selectedPage>0&&h(PageButton,{key:"942a34679e4270fc767fd4f63659e103531b376d",page:"first",selected:this.selectedPage,onClick:function(){return e.handleSelectPage(0)}}),i>0&&h("div",{key:"7961f0803894b45de72528a5e3456b2bc343f0a5",class:"ellipsis"},"..."),t.map((function(i){return h(PageButton,{page:i,selected:e.selectedPage,onClick:function(i){return e.handleSelectPage(+i)}})})),this.selectedPage<r-1&&h("div",{key:"917a3fc286ddf919c36eb94e59b5847dc7aa90ee",class:"ellipsis"},"..."),this.selectedPage<r-1&&h(PageButton,{key:"59db51f1f4ae5c1878a218681c62cc3f9e621340",page:"last",selected:this.selectedPage,onClick:function(){return e.handleSelectPage(r-1)}}))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();VerdocsQuickFilter$1.style=VerdocsPaginationStyle0;var verdocsQuickFilterCss='@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-quick-filter{position:relative;font-family:"Inter", "Barlow", sans-serif}verdocs-quick-filter .control{outline:0;height:34px;display:-ms-flexbox;display:flex;cursor:pointer;border-radius:4px;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-webkit-box-sizing:border-box;box-sizing:border-box;background:#ffffff;-webkit-transition:all 100ms ease 0s;transition:all 100ms ease 0s;border:1px solid #cccccc}verdocs-quick-filter .title{padding:0 8px;font-size:14px;max-width:100%;overflow:hidden;color:#33364b;white-space:nowrap;-webkit-box-sizing:border-box;box-sizing:border-box;text-overflow:ellipsis}verdocs-quick-filter .title .prefix{display:inline;font-weight:700;margin:0 7px 0 0;color:#4c56cb}verdocs-quick-filter .arrow{width:32px;height:32px;border:none;outline:none;cursor:pointer;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;background:#ffffff;-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s}verdocs-quick-filter .arrow svg{-webkit-transition:0.3s;transition:0.3s;fill:#cccccc}verdocs-quick-filter .separator{width:1px;display:block;margin-top:8px;margin-bottom:8px;-ms-flex-item-align:stretch;align-self:stretch;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#cccccc}verdocs-quick-filter .items{display:none;z-index:10000;position:absolute;border-radius:4px;background:#ffffff;-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px;box-shadow:rgba(0, 0, 0, 0.1) 0 0 0 1px, rgba(0, 0, 0, 0.1) 0 4px 11px}verdocs-quick-filter .items[data-show]{display:block}verdocs-quick-filter .option{width:100%;border:none;display:block;font-size:14px;text-align:left;background:none;padding:10px 20px;color:#1e2031}verdocs-quick-filter .option:hover{cursor:pointer;background:rgba(76, 86, 203, 0.2470588235)}verdocs-quick-filter .option[disabled]{color:#aaaaaa}verdocs-quick-filter .option[disabled]:hover{cursor:inherit;background:transparent;color:#aaaaaa}verdocs-quick-filter.open .items{display:block}verdocs-quick-filter.open .arrow svg{-webkit-transform:scaleY(-1);transform:scaleY(-1)}';var VerdocsQuickFilterStyle0=verdocsQuickFilterCss;var 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>';var VerdocsQuickFilter=function(){function e(e){registerInstance(this,e);this.optionSelected=createEvent(this,"optionSelected",7);this.clickListenerSymbol=new AbortController;this.options=[];this.label="Filter";this.value="";this.placeholder="Select...";this.open=undefined}e.prototype.componentDidLoad=function(){this.popper=createPopper(this.dropdownButton,this.dropdownMenu,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[-1,14]}}]});window.addEventListener("click",this.clickListener.bind(this),{signal:this.clickListenerSymbol.signal})};e.prototype.disconnectedCallback=function(){this.clickListenerSymbol.abort()};e.prototype.clickListener=function(e){var i=!(e.target==this.el||this.el.contains(e.target));if(i){this.hide()}};e.prototype.handleSelectOption=function(e,i){e.stopPropagation();this.optionSelected.emit(i);this.value=i.value;this.hide()};e.prototype.showDropdown=function(){var e,i;this.open=true;this.dropdownMenu.setAttribute("data-show","");this.dropdownMenu.removeAttribute("aria-hidden");(e=this.popper)===null||e===void 0?void 0:e.setOptions((function(e){return __assign(__assign({},e),{modifiers:__spreadArray(__spreadArray([],e.modifiers,true),[{name:"eventListeners",enabled:true}],false)})})).catch((function(){}));(i=this.popper)===null||i===void 0?void 0:i.update().catch((function(){}))};e.prototype.handleHideDropdown=function(e){var i,r;if(((i=e===null||e===void 0?void 0:e.target)===null||i===void 0?void 0:i.localName)==="button"&&((r=e===null||e===void 0?void 0:e.target)===null||r===void 0?void 0:r.className)==="arrow"){return}this.hide()};e.prototype.toggleDropdown=function(e){e.stopPropagation();if(this.open){this.hide()}else{this.showDropdown()}};e.prototype.hide=function(){var e;this.open=false;this.dropdownMenu.removeAttribute("data-show");this.dropdownMenu.setAttribute("aria-hidden","true");(e=this.popper)===null||e===void 0?void 0:e.setOptions((function(e){return __assign(__assign({},e),{modifiers:__spreadArray(__spreadArray([],e.modifiers,true),[{name:"eventListeners",enabled:false}],false)})})).catch((function(){}))};e.prototype.render=function(){var e=this;var i,r,t;var o=(i=this.options)===null||i===void 0?void 0:i.find((function(i){return i.value===e.value}));var s=(r=this.options)===null||r===void 0?void 0:r.reduce((function(e,i){return e.label.length>i.label.length?e:i}));var n=renderedTextWidth((s===null||s===void 0?void 0:s.label)||"FILLER","14px Inter, Barlow, sans-serif");var a=renderedTextWidth(this.label,"14px Inter, Barlow, sans-serif");var c="".concat(n+a+40,"px");return h(Host,{key:"63c979bc0e8b4b75f0608a7b5c11bf92de2375cc",class:{open:!!this.open},style:{minWidth:c,display:"inline-block"}},h("div",{key:"785aac3556deaac0bbf55d8eb1f52e846448b44d",class:"control",onClick:function(i){return e.toggleDropdown(i)},onBlur:function(i){return e.handleHideDropdown(i)}},h("div",{key:"521c951babae9d882402ffb94aeb4f40a3afe9c6",class:"title",ref:function(i){return e.dropdownButton=i}},h("span",{key:"66f15637c5bcaa84326b0360b1cf0b9eeb34cc19",class:"prefix"},this.label,":"),o?o.label:this.placeholder),h("div",{key:"8f5719750fd5fb40c8787d044904629ede1cb5a5",style:{flex:"1"}}),h("div",{key:"1f16f93487115760416fa9d7fa025e25da4e1cb9",class:"separator"}),h("div",{key:"bf485d08eccf8e960d161007b3b16517f494f85f",class:"arrow",innerHTML:DropdownArrow,"aria-label":"Open Menu"})),h("div",{key:"8842f5609144f401a51124501544f0fb6c4700c9",class:"items","aria-hidden":!this.open,ref:function(i){return e.dropdownMenu=i},style:{minWidth:c}},(t=this.options)===null||t===void 0?void 0:t.map((function(i){return i.label?h("button",{onClick:function(r){return e.handleSelectOption(r,i)},class:"option ".concat(i.value===e.value?"selected":""),disabled:i.disabled},i.label):h("div",{class:"separator"})}))))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();VerdocsQuickFilter.style=VerdocsQuickFilterStyle0;export{VerdocsQuickFilter$1 as verdocs_pagination,VerdocsQuickFilter as verdocs_quick_filter};
+//# sourceMappingURL=verdocs-pagination_2.entry.js.map

package/dist/esm-es5/verdocs-pagination_2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["verdocsPaginationCss","VerdocsPaginationStyle0","ChevronDoubleLeft","ChevronDoubleRight","VISIBLE_PAGES","PageButton","_d","page","selected","onClick","label","String","h","class","concat","innerHTML","VerdocsQuickFilter","VerdocsQuickFilter$1","prototype","handleSelectPage","this","selectedPage","_a","selectPage","emit","render","_this","firstPage","Math","max","numPages","itemCount","ceil","perPage","pagesToDisplay","integerSequence","slice","Host","key","map","pageNumber","verdocsQuickFilterCss","VerdocsQuickFilterStyle0","DropdownArrow","clickListenerSymbol","AbortController","class_1","componentDidLoad","popper","createPopper","dropdownButton","dropdownMenu","placement","modifiers","name","options","offset","window","addEventListener","clickListener","bind","signal","disconnectedCallback","abort","e","outside","target","el","contains","hide","handleSelectOption","option","stopPropagation","optionSelected","value","showDropdown","open","setAttribute","removeAttribute","setOptions","__assign","__spreadArray","enabled","catch","_b","update","handleHideDropdown","localName","className","toggleDropdown","selectedOption","find","longestOption","reduce","prev","curr","length","longestLabelWidth","renderedTextWidth","prefixWidth","minWidth","style","display","onBlur","ref","placeholder","flex","_c","disabled"],"sources":["src/components/controls/verdocs-pagination/verdocs-pagination.scss?tag=verdocs-pagination","src/components/controls/verdocs-pagination/verdocs-pagination.tsx","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-pagination {\n  gap: 8px;\n  display: flex;\n  flex-direction: row;\n  font-family: $primary-font;\n\n  .page-button {\n    height: 38px;\n    display: flex;\n    flex: 0 0 38px;\n    cursor: pointer;\n    font-size: 16px;\n    font-weight: 600;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: center;\n    color: $verdocs-dark-blue;\n    border: 1px solid $verdocs-purple;\n\n    svg {\n      width: 18px;\n      height: 18px;\n    }\n\n    &.selected {\n      cursor: default;\n      color: $verdocs-grey-4;\n      background: $verdocs-purple;\n    }\n  }\n\n  .ellipsis {\n    width: 38px;\n    height: 38px;\n    display: flex;\n    flex: 0 0 38px;\n    line-height: 32px;\n    justify-content: center;\n    color: $verdocs-dark-blue;\n  }\n}\n","import {integerSequence} from '@verdocs/js-sdk';\nimport {Host, FunctionalComponent} from '@stencil/core';\nimport {Component, Prop, Element, h, Event, EventEmitter} from '@stencil/core';\n\nconst ChevronDoubleLeft = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5\" /></svg>`;\n\nconst ChevronDoubleRight = `<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5\" /></svg>`;\n\ntype TPageNumber = number | 'first' | 'last';\n\nconst VISIBLE_PAGES = 5;\n\nconst PageButton: FunctionalComponent<{page: TPageNumber; selected: number; onClick: (page: TPageNumber) => void}> = ({page, selected, onClick}) => {\n  let label;\n  if (page === 'first') {\n    label = ChevronDoubleLeft;\n  } else if (page === 'last') {\n    label = ChevronDoubleRight;\n  } else {\n    label = String(page + 1);\n  }\n\n  return <div class={`page-button ${page === selected ? 'selected' : ''}`} onClick={() => onClick(page)} innerHTML={label} />;\n};\n\n/**\n * Display a simple pagination control with individual buttons to move through the data set.\n *\n * ```ts\n * <verdocs-pagination\n *   selectedPage={1}\n *   itemCount={50}\n *   perPage={10}\n *   onSelectPage={(e) => {setSelectedpage(e.detail.selectedPage)}}\n * />\n * ```\n */\n@Component({\n  tag: 'verdocs-pagination',\n  styleUrl: 'verdocs-pagination.scss',\n})\nexport class VerdocsQuickFilter {\n  @Element()\n  el: HTMLElement;\n\n  /**\n   * The currently selected page.\n   */\n  @Prop({mutable: true, reflect: true}) selectedPage: number = 0;\n\n  /**\n   * The total number of items.\n   */\n  @Prop() itemCount: number = 1;\n\n  /**\n   * The number of displayed per page.\n   */\n  @Prop() perPage: number = 10;\n\n  /**\n   * Event fired when the selected page changes. The new page number is included in the event.\n   */\n  @Event({composed: true}) selectPage: EventEmitter<{selectedPage: number}>;\n\n  handleSelectPage(page: number) {\n    this.selectedPage = page;\n    this.selectPage?.emit({selectedPage: page});\n  }\n\n  render() {\n    const firstPage = Math.max(0, this.selectedPage - 2);\n    const numPages = this.itemCount > 0 ? Math.ceil(this.itemCount / this.perPage) : 0;\n    const pagesToDisplay = integerSequence(0, Math.ceil(this.itemCount / this.perPage)).slice(firstPage, firstPage + VISIBLE_PAGES);\n\n    return (\n      <Host>\n        {this.selectedPage > 0 && <PageButton page={'first'} selected={this.selectedPage} onClick={() => this.handleSelectPage(0)} />}\n\n        {firstPage > 0 && <div class=\"ellipsis\">...</div>}\n\n        {pagesToDisplay.map(pageNumber => (\n          <PageButton page={pageNumber} selected={this.selectedPage} onClick={page => this.handleSelectPage(+page)} />\n        ))}\n\n        {this.selectedPage < numPages - 1 && <div class=\"ellipsis\">...</div>}\n\n        {this.selectedPage < numPages - 1 && <PageButton page={'last'} selected={this.selectedPage} onClick={() => this.handleSelectPage(numPages - 1)} />}\n      </Host>\n    );\n  }\n}\n","@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"],"mappings":"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","ignoreList":[]}