import { h, r as registerInstance, c as Host } from './index-38ad4957.js';
import { i as intl } from './global-96c14d63.js';
import { n as h$1 } from './dom-context-hooks.module-50442785.js';
import './index.module-b23fdad8.js';
import { g as getProps } from './utils-334c1e34.js';
import './JSS-67b5cff8.js';
import { o as optimizeCloudinaryUrl } from './imageUrl-4775f17b.js';
import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-200c9df8.js';

function EmptyStateView(props) {
  const { emptyStateHeader, emptyStateImage, emptyStateText, supportText, missingFeature = "", } = props;
  return (h("sqm-portal-container", { padding: "large", gap: "medium", part: "sqm-base" },
    h("img", { style: { height: "100px", margin: "auto" }, src: optimizeCloudinaryUrl(emptyStateImage, { height: 200 }), decoding: "async" }),
    h("sqm-titled-section", { style: { maxHeight: "400px" }, "label-margin": "xxx-small", "text-align": "center" },
      h("sqm-text", { slot: "label" },
        h("p", { part: "header-text" }, emptyStateHeader)),
      h("sqm-text", { slot: "content" },
        h("p", { part: "description-text" }, intl.formatMessage({
          id: "emptyStateText",
          defaultMessage: emptyStateText,
        }, {
          supportText: (h("a", { target: "_blank", href: `mailto:saasquatch-support@impact.com?subject=Next steps for ${missingFeature} feature&body=Hi Support Team, %0D%0A
                  %0D%0A  
                  I am interested to learn more about the ${missingFeature} feature. Please let me know the next steps to access this feature, including any necessary plan upgrades.%0D%0A
                  %0D%0A 
                  - Feature Interested In: ${missingFeature}%0D%0A
                  - Company Name: [Please fill out your company name here]%0D%0A
                  %0D%0A
                  Thank you` }, supportText)),
        }))))));
}

const Empty = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
  }
  render() {
    return (h(Host, { slot: "empty" }, h(EmptyStateView, { emptyStateImage: this.emptyStateImage ||
        "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_leaderboard2.png", emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText, supportText: this.supportText })));
  }
};

const PortalContainer = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.ignored = true;
    /**
     * @uiName Direction
     * @uiType string
     * @uiEnum ["row", "column"]
     * @uiEnumNames ["Row", "Column"]
     */
    this.direction = "column";
    /**
     * @uiName Gap
     * @uiType string
     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
     */
    this.gap = "xxx-large";
    /**
     * @uiName Display
     * @uiType string
     * @uiEnum ["grid", "flex"]
     * @uiEnumNames ["Grid", "Flex"]
     */
    this.display = "grid";
    /**
     * @uiName Maximum width
     */
    this.maxWidth = "100%";
    /**
     * @uiName Flex wrap behavior
     * @uiType string
     * @uiEnum ["wrap", "nowrap"]
     * @uiEnumNames ["Wrap", "No Wrap"]
     */
    this.flexWrap = "wrap";
    h$1(this);
  }
  disconnectedCallback() { }
  render() {
    return (h(PortalContainerView, Object.assign({}, getProps(this)), h("slot", null)));
  }
};

const Text = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.ignored = true;
    h$1(this);
  }
  disconnectedCallback() { }
  componentWillLoad() { }
  render() {
    const vanillaStyle = `
    sqm-text {
      display: block;
      color: ${this.textColor || "var(--sqm-text)"};
    }

    sqm-text h1 {
      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-xxx-large)"};
      font-weight: var(--sl-font-weight-semibold);
      color: ${this.textColor || "var(--sqm-text)"};
      margin: 0;
    }

    sqm-text h2 {
      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-xx-large)"};
      font-weight: var(--sl-font-weight-semibold);
      color: ${this.textColor || "var(--sqm-text)"};
      margin: 0;
    }

    sqm-text h3 {
      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-x-large)"};
      font-weight: var(--sl-font-weight-semibold);
      color: ${this.textColor || "var(--sqm-text)"};
      margin: 0;
    }

    sqm-text h4 {
      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-large)"};
      font-weight: var(--sl-font-weight-bold);
      color: ${this.textColor || "var(--sqm-text)"};
      margin: 0;
    }

    sqm-text p {
      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-medium)"};
      font-weight: var(--sl-font-weight-normal);
      color: ${this.textColor || "var(--sqm-text)"};
      margin: 0;
    }

    sqm-text sub {
      font-size: ${this.fontSize ? `${this.fontSize}px` : "var(--sl-font-size-small)"};
      font-weight: var(--sl-font-weight-normal);
      color: ${this.textColor || "var(--sqm-text)"};
      margin: 0;
    }
    `;
    return (h("div", null, h("style", null, vanillaStyle), h("slot", null)));
  }
};

const TitledSection = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * @uiName Text alignment
     * @uiType string
     * @uiEnum ["left", "center", "right"]
     * @uiEnumNames ["Left", "Center", "Right"]
     */
    this.textAlign = "left";
    /**
     * Margin applied to the bottom of the label slot
     *
     * @uiName Label bottom margin
     * @uiType string
     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
     */
    this.labelMargin = "small";
    /**
     * Padding applied to all 4 sides of the container
     *
     * @uiName Section padding
     * @uiType string
     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
     */
    this.padding = "none";
    h$1(this);
  }
  disconnectedCallback() { }
  render() {
    const label = h("slot", { name: "label" }, this.label);
    const content = h("slot", { name: "content" });
    return h(PortalSectionView, Object.assign({}, { ...getProps(this), label, content }));
  }
};

export { Empty as sqm_empty, PortalContainer as sqm_portal_container, Text as sqm_text, TitledSection as sqm_titled_section };
