'use strict';

var index = require('./index-CQ5bTnED.js');
var index$1 = require('./index-CeUF44L9.js');

const 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}";

// TODO: See what was done in Storybook. Move all SVG icons to a common file that both projects can share
//  and reduce duplication between components for re-used icons. Also bring icons into Figma for reuse there.
const BusinessIcon = '<svg xmlns="http://www.w3.org/2000/svg"  focusable="false" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"></path></svg>';
const VerdocsOrganizationCard = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.hovered = false;
    }
    onMouseOver() {
        this.hovered = true;
    }
    onMouseOut() {
        this.hovered = false;
    }
    render() {
        var _a, _b, _c, _d, _e, _f;
        console.log('Rendering org card', this.organization.thumbnail_url, this.organization);
        const fallbackIcon = BusinessIcon;
        const portalId = `verdocs-org-card-${this.organization.id}`;
        return (index.h(index.Host, { key: 'afab00c0594b7f49114cb0cd6d0f35072a6557a9', id: portalId }, this.organization.thumbnail_url ? index.h("img", { class: "icon", src: this.organization.thumbnail_url, alt: "Logo" }) : index.h("span", { class: "icon", innerHTML: fallbackIcon }), index.h("span", { key: '820fee6596d9724cfa6628d1b820fccf8c448040', class: "content" }, (_a = this.organization) === null || _a === void 0 ? void 0 : _a.name), index.h("verdocs-portal", { key: '9d96819970166e1dba589b8e7bcfecb17302b642', anchor: portalId }, index.h("div", { key: '9afb356db5a41fab522196b24001079656895bb8', class: "verdocs-org-card-popup", style: { display: this.hovered ? 'block' : 'none' } }, this.organization.full_logo_url ? (index.h("div", { class: "popup-header-with-logo" }, index.h("img", { src: this.organization.full_logo_url, alt: "Logo" }), index.h("div", { class: "title" }, (_b = this.organization) === null || _b === void 0 ? void 0 : _b.name))) : (index.h("div", { class: "popup-header" }, index.h("span", { class: "status" }, index.h("span", { class: "icon", innerHTML: fallbackIcon })), index.h("span", { class: "title" }, (_c = this.organization) === null || _c === void 0 ? void 0 : _c.name))), index.h("div", { key: 'fbd533d1b9981ed1748426ca40cf2acef04b4516', class: "popup-body" }, index.h("div", { key: '5d9e78644cb47b61aaf86051aada3e6af888552a', class: "field" }, index.h("strong", { key: '6c734f2d6f847bd52dba49bd0d3d76765df30af9' }, "Joined"), index$1.dateFnsExports.format(new Date(((_d = this.organization) === null || _d === void 0 ? void 0 : _d.created_at) || undefined), 'LLL d, Y')), this.organization.url && (index.h("div", { key: 'e8a7221d73736f7832a2cc839a32efb9bcd50348', class: "field" }, index.h("strong", { key: '1aeb04edea44fb6db755a22a07ca34f22ad4f72d' }, "Website"), index.h("a", { key: '26c2d1306f50aa2560525415bb0874f5cb9e461d', href: (_e = this.organization) === null || _e === void 0 ? void 0 : _e.url, target: "_blank", rel: "nofollow" }, (_f = this.organization) === null || _f === void 0 ? void 0 : _f.url))))))));
    }
};
VerdocsOrganizationCard.style = verdocsOrganizationCardCss;

const 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)}}";

const Z_INDEX = '10001';
const VerdocsPortal = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.clickAway = index.createEvent(this, "clickAway");
        this.moved = false;
        /**
         * Vertical offset from the parent.
         */
        this.voffset = 0;
    }
    handleScroll() {
        this.calculatePosition();
    }
    handleResize() {
        this.calculatePosition();
    }
    handleClick(e) {
        var _a;
        const closest = e.target.closest('.verdocs-portal');
        if (!this.element.contains(e.target) && !closest) {
            (_a = this.clickAway) === null || _a === void 0 ? void 0 : _a.emit();
        }
        // Temporary hack to dismiss portals-in-portals, which right now is pretty much just
        // multiselect.
        document.querySelectorAll('.verdocs-multiselect-dropdown').forEach(el => el.remove());
    }
    calculateLeft() {
        var _a;
        const anchorEl = document.getElementById(this.anchor);
        if (!anchorEl)
            return 0;
        const anchorRect = anchorEl.getBoundingClientRect();
        const rightOfViewportWithScroll = document.documentElement.clientWidth + document.documentElement.scrollLeft;
        const leftOfPopup = Math.max(anchorRect.left, 0);
        // Old centering logic, disabled temporarily
        //    Math.max(anchorRect.left - this.portal.offsetWidth / 2 + anchorRect.width / 2, 0);
        // Old right-align logic, disabled temporarily
        //    Math.max(anchorRect.left + anchorRect.width - this.portal.offsetWidth, 0);
        const popupWidth = ((_a = this.element) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 400;
        const offRightEdge = leftOfPopup + popupWidth > rightOfViewportWithScroll;
        return offRightEdge ? rightOfViewportWithScroll - popupWidth - 20 : leftOfPopup;
    }
    calculateTop() {
        var _a;
        const anchorEl = document.getElementById(this.anchor);
        if (!anchorEl)
            return 0;
        const anchorRect = anchorEl.getBoundingClientRect();
        const bottomOfViewportWithScroll = document.documentElement.clientHeight + document.documentElement.scrollTop;
        const topOfPopup = anchorRect.bottom + this.voffset + document.documentElement.scrollTop;
        const popupHeight = ((_a = this.element) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 300;
        const offBottomEdge = topOfPopup + popupHeight > bottomOfViewportWithScroll;
        return offBottomEdge ? topOfPopup - popupHeight - anchorRect.height : topOfPopup;
    }
    calculatePosition() {
        this.portal.style.top = `${this.calculateTop()}px`;
        this.portal.style.left = `${this.calculateLeft()}px`;
    }
    componentWillLoad() {
        var _a;
        const id = `${this.anchor}-portal`;
        (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove();
        this.portal = document.createElement('div');
        this.portal.setAttribute('id', id);
        this.portal.style.zIndex = Z_INDEX;
        this.portal.style.position = 'absolute';
        this.portal.className = 'verdocs-portal-wrapper';
        document.body.append(this.portal);
    }
    componentDidLoad() {
        this.portal.appendChild(this.element);
        this.calculatePosition();
    }
    disconnectedCallback() {
        this.moved ? this.portal.remove() : (this.moved = true);
    }
    render() {
        return (index.h(index.Host, { key: '7665b2b43d8e3e12ee2220efa0bf3df23daa5c8c', ref: el => (this.element = el), class: "verdocs-portal" }, index.h("slot", { key: '0972e32632d3f59a1157c278f0ea54ac71eabbdf' })));
    }
};
VerdocsPortal.style = verdocsPortalCss;

exports.verdocs_organization_card = VerdocsOrganizationCard;
exports.verdocs_portal = VerdocsPortal;
//# sourceMappingURL=verdocs-organization-card.verdocs-portal.entry.cjs.js.map
