'use strict';

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

const index = require('./index-8277cbb3.js');
const domContextHooks_module = require('./dom-context-hooks.module-e7b6727c.js');
const imageUrl = require('./imageUrl-a7880cab.js');

const HeroImage = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /**
     * @uiName Logo text size (in px)
     * @uiWidget number
     */
    this.logoTextSize = 32;
    /**
     * @uiWidget color
     * @uiName Logo text color
     */
    this.logoTextColor = "var(--sqm-primary-color, var(--sqm-text, #555555))";
    /**
     * Page participants are navigated to after clicking the header logo.
     *
     * @uiName Redirect path
     * @uiWidget pageSelect
     */
    this.nextPage = "/";
    /**
     * @uiName Logo height (in px)
     */
    this.height = 60;
    domContextHooks_module.h$1(this);
  }
  disconnectedCallback() { }
  render() {
    return (index.h(index.Host, null, index.h("a", { href: this.nextPage, part: "sqm-link", style: { textDecoration: "none" } }, this.imageUrl ? (index.h("img", { style: { height: `${this === null || this === void 0 ? void 0 : this.height}px` }, src: imageUrl.optimizeCloudinaryUrl(this === null || this === void 0 ? void 0 : this.imageUrl, {
        height: (this === null || this === void 0 ? void 0 : this.height) ? this.height * 2 : undefined,
      }), decoding: "async" })) : (index.h("h3", { style: {
        fontSize: `${this.logoTextSize}px`,
        color: this.logoTextColor,
      } }, this.logoText)))));
  }
};

exports.sqm_header_logo = HeroImage;
