text: define(["exports", "require", "../../../lit-element/lit-element.js", "../../simple-colors/simple-colors.js", "../../haxcms-elements/lib/core/haxcms-site-store.js", "../../../mobx/lib/mobx.module.js", "../../utils/utils.js"], function (_exports, _require, _litElement, _simpleColors, _haxcmsSiteStore, _mobxModule, _utils) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.SimpleBlogHeader = void 0;
    _require = babelHelpers.interopRequireWildcard(_require);
  
    /**
     * `simple-blog-header`
     * `A simple blog header to the front of the site`
     * @element simple-blog-header
     */
    class SimpleBlogHeader extends _simpleColors.SimpleColors {
      /**
       * LitElement constructable styles enhancement
       */
      static get styles() {
        return [...super.styles, (0, _litElement.css)`
          :host {
            display: block;
          }
          .teaserimage {
            height: 450px;
            padding: 0;
            margin: 0;
            position: relative;
            overflow: hidden;
            background-color: var(--haxcms-color, black);
          }
          .teaserimage-image {
            transition: all 0.6s linear;
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1;
            text-indent: -9999px;
            transform: translate3d(0px, 24px, 0px);
            opacity: 0.8;
            visibility: visible;
          }
          .teaserimage-image:hover {
            opacity: 1;
          }
          .blog-logo {
            width: 120px;
            height: 120px;
            position: absolute;
            margin-top: -60px;
            right: 50%;
            margin-right: -60px;
            background-size: cover;
            border-radius: 50%;
            z-index: 99;
            text-indent: -9999px;
            border: 3px solid #fff;
            background-color: #fff;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
          }
          .site-title {
            margin: 0;
            padding: 84px 16px 8px;
            font-size: 50px;
            text-align: center;
            font-weight: 700;
            letter-spacing: -2px;
            outline: 0;
            line-height: 50px;
            word-break: break-word;
            color: #333;
          }
          .blog-description {
            margin: 0 0 20px;
            padding: 0 32px;
            font-size: 18px;
            line-height: 1.5;
            color: #666;
            text-align: center;
            font-weight: 400;
          }
          .custom-links {
            margin: 0 auto 36px;
            text-align: center;
            color: #ccc;
            display: flex;
            justify-content: center;
          }
          site-rss-button {
            margin: 0 4px;
          }
        `];
      }
      /**
       * Store the tag name to make it easier to obtain directly.
       */
  
  
      static get tag() {
        return "simple-blog-header";
      }
  
      constructor() {
        super();
        new Promise((res, rej) => _require.default(["../../haxcms-elements/lib/ui-components/site/site-title.js"], res, rej));
        new Promise((res, rej) => _require.default(["../../haxcms-elements/lib/ui-components/site/site-rss-button.js"], res, rej));
      } // render function
  
  
      render() {
        return (0, _litElement.html)`
        <div class="teaserimage">
          <div
            class="teaserimage-image"
            style="background-image: url(${this.image});"
          ></div>
        </div>
        <header class="blog-header">
          <iron-icon class="blog-logo" icon="${this.icon}"></iron-icon>
          <h1 class="site-title">${this.title}</h1>
          <h2 class="blog-description">${this.description}</h2>
          <div class="custom-links">
            <site-rss-button type="atom"></site-rss-button>
            <site-rss-button type="rss"></site-rss-button>
          </div>
        </header>
      `;
      }
  
      static get properties() {
        return { ...super.properties,
          description: {
            type: String
          },
          image: {
            type: String
          },
          icon: {
            type: String
          },
          title: {
            type: String
          }
        };
      }
  
      connectedCallback() {
        super.connectedCallback();
        this.__disposer = [];
        (0, _mobxModule.autorun)(reaction => {
          let manifest = (0, _mobxModule.toJS)(_haxcmsSiteStore.store.manifest);
  
          if (manifest && manifest.description) {
            this.description = manifest.description;
          }
  
          if (manifest && manifest.title) {
            this.title = manifest.title;
          }
  
          this.image = (0, _utils.varGet)(manifest, "metadata.theme.variables.image", "assets/banner.jpg");
          this.icon = (0, _utils.varGet)(manifest, "metadata.theme.variables.icon", "icons:record-voice-over");
          this.author = (0, _utils.varGet)(manifest, "metadata.author", {});
  
          this.__disposer.push(reaction);
        });
      }
  
      disconnectedCallback() {
        for (var i in this.__disposer) {
          this.__disposer[i].dispose();
        }
  
        super.disconnectedCallback();
      }
  
    }
  
    _exports.SimpleBlogHeader = SimpleBlogHeader;
    window.customElements.define(SimpleBlogHeader.tag, SimpleBlogHeader);
  });