'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-8277cbb3.js');
const global = require('./global-b7b1b8fe.js');
const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
require('./index.module-f8c8495f.js');
const utils = require('./utils-6847bc06.js');
require('./JSS-8503a151.js');
const imageUrl = require('./imageUrl-a7880cab.js');
const sqmPortalContainerView = require('./sqm-portal-container-view-757f921b.js');

function EmptyStateView(props) {
  const { emptyStateHeader, emptyStateImage, emptyStateText, supportText, missingFeature = "", } = props;
  return (index.h("sqm-portal-container", { padding: "large", gap: "medium", part: "sqm-base" },
    index.h("img", { style: { height: "100px", margin: "auto" }, src: imageUrl.optimizeCloudinaryUrl(emptyStateImage, { height: 200 }), decoding: "async" }),
    index.h("sqm-titled-section", { style: { maxHeight: "400px" }, "label-margin": "xxx-small", "text-align": "center" },
      index.h("sqm-text", { slot: "label" },
        index.h("p", { part: "header-text" }, emptyStateHeader)),
      index.h("sqm-text", { slot: "content" },
        index.h("p", { part: "description-text" }, global.intl.formatMessage({
          id: "emptyStateText",
          defaultMessage: emptyStateText,
        }, {
          supportText: (index.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) {
    index.registerInstance(this, hostRef);
  }
  render() {
    return (index.h(index.Host, { slot: "empty" }, index.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) {
    index.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";
    domContextHooks_module.h$1(this);
  }
  disconnectedCallback() { }
  render() {
    return (index.h(sqmPortalContainerView.PortalContainerView, Object.assign({}, utils.getProps(this)), index.h("slot", null)));
  }
};

const Text = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ignored = true;
    domContextHooks_module.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 (index.h("div", null, index.h("style", null, vanillaStyle), index.h("slot", null)));
  }
};

const TitledSection = class {
  constructor(hostRef) {
    index.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";
    domContextHooks_module.h$1(this);
  }
  disconnectedCallback() { }
  render() {
    const label = index.h("slot", { name: "label" }, this.label);
    const content = index.h("slot", { name: "content" });
    return index.h(sqmPortalContainerView.PortalSectionView, Object.assign({}, { ...utils.getProps(this), label, content }));
  }
};

exports.sqm_empty = Empty;
exports.sqm_portal_container = PortalContainer;
exports.sqm_text = Text;
exports.sqm_titled_section = TitledSection;
