import{html as e,css as t}from"../../../lit/index.js";import{SimpleColors as i}from"../../simple-colors/simple-colors.js";import{store as o}from"../../haxcms-elements/lib/core/haxcms-site-store.js";import{autorun as s,toJS as a}from"../../../mobx/dist/mobx.esm.js";import"../../../@polymer/polymer/lib/elements/custom-style.js";class SimpleBlogPost extends i{static get styles(){return[super.styles,t`
        :host {
          display: block;
          min-height: 80vh;
        }
        main {
          transition:
            opacity 0.2s ease-in-out,
            visibility 0.2s ease-in-out;
          width: 100%;
          max-width: 900px;
          margin: 0 auto;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          opacity: 1;
          visibility: visible;
        }
        @media only screen and (max-width: 900px) {
          main {
            padding: 0 32px;
          }
        }
        section {
          width: 100%;
          font-family: Linux Libertine;
          color: #333;
        }
        section ::slotted(*) {
          font-weight: 400;
          font-style: normal;
          font-size: 22px;
          line-height: 30px;
          margin: 0;
          padding-bottom: 30px;
          color: #333;
          -webkit-hyphens: auto;
          -moz-hyphens: auto;
          hyphens: auto;
        }
        :host([has-image]) .article-image {
          position: absolute;
          background-color: var(--haxcms-color, black);
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          overflow: hidden;
        }
        .post-image-image {
          background-size: cover;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          text-indent: -9999px;
          padding-top: 33%;
          z-index: 1;
        }
        .post-meta {
          font-family:
            Open Sans,
            MundoSans,
            "Helvetica Neue",
            Arial,
            Helvetica,
            sans-serif;
        }
        :host([has-image]) .post-meta {
          position: absolute;
          bottom: 80px;
          left: 30%;
          right: 30%;
          padding-top: 60px;
          z-index: 9;
          font-family:
            Open Sans,
            MundoSans,
            "Helvetica Neue",
            Arial,
            Helvetica,
            sans-serif;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        /**
         * Hide the slotted content during edit mode
         */
        :host([edit-mode]) #slot {
          display: none;
        }
      `]}static get tag(){return"simple-blog-post"}render(){return e`
      <custom-style>
        <style>
          site-active-title {
            font-weight: 700;
            font-style: normal;
            letter-spacing: -0.04em;
            font-size: 50px;
            line-height: 1.1;
            color: black;
          }
          :host([has-image]) site-active-title {
            font-weight: 700;
            font-style: normal;
            letter-spacing: -0.04em;
            font-size: 50px;
            line-height: 1.1;
            margin-bottom: 16px;
            text-shadow:
              0 1px 16px rgba(0, 0, 0, 0.5),
              0 0 1px rgba(0, 0, 0, 0.5);
            color: white;
          }
        </style>
      </custom-style>
      <main>
        <article>
          <div class="article-image">
            ${this.hasImage?e`
                  <div
                    id="image"
                    class="post-image-image"
                    style='background-image: url("${this.image}");'
                  ></div>
                `:""}
            <div class="post-meta">
              <site-active-title></site-active-title>
            </div>
          </div>
          <section id="contentcontainer">
            <div id="slot"><slot></slot></div>
          </section>
        </article>
      </main>
    `}updated(e){e.forEach(((e,t)=>{"hasImage"==t&&this._hasImageChanged(this[t],e)}))}static get properties(){return{...super.properties,hasImage:{type:Boolean,reflect:!0,attribute:"has-image"},editMode:{type:Boolean,reflect:!0,attribute:"edit-mode"},image:{type:String}}}constructor(){super(),this.windowControllers=new AbortController,this.editMode=!1,import("../../haxcms-elements/lib/ui-components/active-item/site-active-title.js")}connectedCallback(){super.connectedCallback(),this.__disposer=[],setTimeout((()=>{globalThis.addEventListener("scroll",this._scrollListener.bind(this),{signal:this.windowControllers.signal}),s((e=>{const t=a(o.activeItemFields);this.hasImage=this._computeHasImage(t),this.hasImage&&(this.image=t.images[0].src),this.__disposer.push(e)}))}),0)}disconnectedCallback(){for(var e in this.windowControllers.abort(),this.__disposer)this.__disposer[e].dispose();super.disconnectedCallback()}_scrollListener(e){if(this.hasImage){let e=(globalThis.pageYOffset||globalThis.document.scrollTop)-(globalThis.document.clientTop||0);if(e<0||e>1500)return;this.shadowRoot.querySelector("#image").style.transform="translate3d(0px, "+e/3+"px, 0px)",this.shadowRoot.querySelector("#image").style.opacity=1-Math.max(e/700,0)}}_hasImageChanged(e,t){e?setTimeout((()=>{let e=this.shadowRoot.querySelector("#image").getBoundingClientRect();this.shadowRoot.querySelector("#contentcontainer").style.paddingTop=e.height+"px"}),0):this.shadowRoot.querySelector("#contentcontainer").style.paddingTop=null}_computeHasImage(e){return!(!e||void 0===e.images||void 0===e.images[0]||void 0===e.images[0].src)}}customElements.define(SimpleBlogPost.tag,SimpleBlogPost);export{SimpleBlogPost};