import { p as proxyCustomElement, H, h, d as Host } from './p-AiOs8RvA.js';
import { d as dateFnsExports } from './p-6fSdgmoO.js';
import { d as defineCustomElement$2 } from './p-BQtWBtuj.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$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsOrganizationCard extends H {
    constructor() {
        super();
        this.__registerHost();
        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 (h(Host, { key: '97272d216497af502a3cb2d6e0952bda802249e1', id: portalId }, this.organization.thumbnail_url ? h("img", { class: "icon", src: this.organization.thumbnail_url, alt: "Logo" }) : h("span", { class: "icon", innerHTML: fallbackIcon }), h("span", { key: 'e5f71759e662b6a1ad04ee9acf2710b9d7904a22', class: "content" }, (_a = this.organization) === null || _a === void 0 ? void 0 : _a.name), h("verdocs-portal", { key: '0496b9a82bca4289e6fb226e24c5fed23c4e8fb3', anchor: portalId }, h("div", { key: '991b528de45afb90d6c54f4ce6d6c415e9e2bc81', 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" }, (_b = this.organization) === null || _b === void 0 ? void 0 : _b.name))) : (h("div", { class: "popup-header" }, h("span", { class: "status" }, h("span", { class: "icon", innerHTML: fallbackIcon })), h("span", { class: "title" }, (_c = this.organization) === null || _c === void 0 ? void 0 : _c.name))), h("div", { key: '54c746473d12e7428b2982c0f627d2d5ac078875', class: "popup-body" }, h("div", { key: 'a291de045b2cd5f6431e795b3b0da2a2187ec019', class: "field" }, h("strong", { key: '86cfad50f43e266fcbca1934458de84c6af791bf' }, "Joined"), dateFnsExports.format(new Date(((_d = this.organization) === null || _d === void 0 ? void 0 : _d.created_at) || undefined), 'LLL d, Y')), this.organization.url && (h("div", { key: '743cc0af65238631e94353b1c0a09718d556a3e5', class: "field" }, h("strong", { key: '55b51d9b2d4256ff4462ba28940331e3aff22e95' }, "Website"), h("a", { key: 'd6f11530ba3adc9c897fd2f26f47de8b9d17b807', 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))))))));
    }
    static get style() { return verdocsOrganizationCardCss; }
}, [0, "verdocs-organization-card", {
        "organization": [16],
        "hovered": [32]
    }, [[1, "mouseover", "onMouseOver"], [1, "mouseout", "onMouseOut"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["verdocs-organization-card", "verdocs-portal"];
    components.forEach(tagName => { switch (tagName) {
        case "verdocs-organization-card":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, VerdocsOrganizationCard$1);
            }
            break;
        case "verdocs-portal":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const VerdocsOrganizationCard = VerdocsOrganizationCard$1;
const defineCustomElement = defineCustomElement$1;

export { VerdocsOrganizationCard, defineCustomElement };
//# sourceMappingURL=verdocs-organization-card.js.map

//# sourceMappingURL=verdocs-organization-card.js.map