text: define(["exports", "require", "../../../@polymer/polymer/polymer-element.js", "../../haxcms-elements/lib/core/haxcms-site-store.js", "../../hax-body/lib/haxutils.js", "../../../mobx/lib/mobx.module.js"], function (_exports, _require, _polymerElement, _haxcmsSiteStore, _haxutils, _mobxModule) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.SimpleBlogFooter = void 0;
    _require = babelHelpers.interopRequireWildcard(_require);
  
    function _templateObject_f3a19810e53211e9a0cfefb808989d41() {
      var data = babelHelpers.taggedTemplateLiteral(["\n      <style include=\"simple-colors-shared-styles\">\n        :host {\n          display: block;\n          width: 100%;\n          position: relative;\n          overflow: hidden;\n          opacity: 1;\n          transition: 0.2s opacity linear;\n        }\n        :host([edit-mode]) {\n          pointer-events: none;\n          opacity: 0.2;\n        }\n        :host *[hidden] {\n          display: none;\n        }\n        .background-closer-image {\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          text-indent: -9999px;\n          background-size: cover;\n          background-repeat: no-repeat;\n          background-position: center;\n          opacity: 0.4;\n          transition: all 0.6s linear;\n        }\n        .background-closer-image-wrap {\n          position: absolute;\n          background-color: rgba(0, 0, 0, 0.9);\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          text-indent: -9999px;\n          transition: all 0.6s linear;\n          opacity: 1;\n        }\n        :host([active]) .background-closer-image {\n          opacity: 0.8;\n        }\n        :host([active]) .background-closer-image-wrap {\n          background-color: rgba(0, 0, 0, 0.2);\n        }\n        .inner {\n          width: 100%;\n          position: relative;\n          z-index: 99;\n          max-width: 640px;\n          padding: 32px 0;\n          text-align: center;\n          margin: 0 auto;\n        }\n        .blog-title {\n          margin: 0;\n          padding: 0 0 10px;\n          font-size: 50px;\n          text-align: center;\n          font-weight: 700;\n          letter-spacing: -2px;\n          outline: 0;\n          line-height: 50px;\n          word-break: break-word;\n          color: white;\n          text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.5);\n        }\n        .blog-description {\n          margin: 0 0 50px;\n          padding: 0 32px;\n          font-size: 18px;\n          line-height: 1.5;\n          color: white;\n          text-align: center;\n          font-weight: 400;\n          text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.5);\n        }\n        paper-button,\n        site-menu-button:not([disabled]) {\n          display: block;\n          text-align: center;\n          letter-spacing: -0.32px;\n          font-size: 15px;\n          font-weight: 400;\n          font-style: normal;\n          text-decoration: none;\n          cursor: pointer;\n          height: 44px;\n          background-color: var(--haxcms-color, red);\n          color: black;\n          box-sizing: border-box;\n          border-radius: none;\n          line-height: 44px;\n          margin: 16px 0;\n          padding: 0;\n          --site-menu-button-button: {\n            height: 44px;\n            width: 100%;\n          }\n        }\n        paper-button:focus,\n        paper-button:active,\n        paper-button:hover,\n        site-menu-button:focus,\n        site-menu-button:active,\n        site-menu-button:hover {\n          outline: 2px solid var(--haxcms-color);\n          outline-offset: 8px;\n        }\n        simple-datetime {\n          letter-spacing: -0.32px;\n          font-weight: 300;\n          font-style: normal;\n          font-size: 16px;\n          line-height: 1.3;\n          color: black;\n          display: inline-flex;\n        }\n      </style>\n      <div class=\"background-closer-image-wrap\">\n        <div\n          class=\"background-closer-image\"\n          style$=\"background-image: url([[manifest.metadata.theme.variables.image]])\"\n        ></div>\n      </div>\n      <div class=\"inner\">\n        <site-menu-button type=\"prev\" position=\"right\" label=\"Previous post\">\n          <simple-datetime\n            format=\"M jS\"\n            timestamp=\"[[nextChanged]]\"\n            unix\n            slot=\"suffix\"\n          >\n          </simple-datetime>\n          <span slot=\"suffix\">[[nextTitle]]</span>\n        </site-menu-button>\n        <site-menu-button type=\"next\" position=\"right\" label=\"Next post\">\n          <simple-datetime\n            format=\"M jS\"\n            timestamp=\"[[prevChanged]]\"\n            unix\n            slot=\"prefix\"\n          ></simple-datetime>\n          <span slot=\"prefix\">[[prevTitle]]</span>\n        </site-menu-button>\n        <paper-button raised on-click=\"_backButtonTap\"\n          >Back to list</paper-button\n        >\n        <h2 class=\"blog-title\">[[manifest.title]]</h2>\n        <h3 class=\"blog-description\">[[manifest.description]]</h3>\n      </div>\n    "], ["\n      <style include=\"simple-colors-shared-styles\">\n        :host {\n          display: block;\n          width: 100%;\n          position: relative;\n          overflow: hidden;\n          opacity: 1;\n          transition: 0.2s opacity linear;\n        }\n        :host([edit-mode]) {\n          pointer-events: none;\n          opacity: 0.2;\n        }\n        :host *[hidden] {\n          display: none;\n        }\n        .background-closer-image {\n          position: absolute;\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          text-indent: -9999px;\n          background-size: cover;\n          background-repeat: no-repeat;\n          background-position: center;\n          opacity: 0.4;\n          transition: all 0.6s linear;\n        }\n        .background-closer-image-wrap {\n          position: absolute;\n          background-color: rgba(0, 0, 0, 0.9);\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          text-indent: -9999px;\n          transition: all 0.6s linear;\n          opacity: 1;\n        }\n        :host([active]) .background-closer-image {\n          opacity: 0.8;\n        }\n        :host([active]) .background-closer-image-wrap {\n          background-color: rgba(0, 0, 0, 0.2);\n        }\n        .inner {\n          width: 100%;\n          position: relative;\n          z-index: 99;\n          max-width: 640px;\n          padding: 32px 0;\n          text-align: center;\n          margin: 0 auto;\n        }\n        .blog-title {\n          margin: 0;\n          padding: 0 0 10px;\n          font-size: 50px;\n          text-align: center;\n          font-weight: 700;\n          letter-spacing: -2px;\n          outline: 0;\n          line-height: 50px;\n          word-break: break-word;\n          color: white;\n          text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.5);\n        }\n        .blog-description {\n          margin: 0 0 50px;\n          padding: 0 32px;\n          font-size: 18px;\n          line-height: 1.5;\n          color: white;\n          text-align: center;\n          font-weight: 400;\n          text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.5);\n        }\n        paper-button,\n        site-menu-button:not([disabled]) {\n          display: block;\n          text-align: center;\n          letter-spacing: -0.32px;\n          font-size: 15px;\n          font-weight: 400;\n          font-style: normal;\n          text-decoration: none;\n          cursor: pointer;\n          height: 44px;\n          background-color: var(--haxcms-color, red);\n          color: black;\n          box-sizing: border-box;\n          border-radius: none;\n          line-height: 44px;\n          margin: 16px 0;\n          padding: 0;\n          --site-menu-button-button: {\n            height: 44px;\n            width: 100%;\n          }\n        }\n        paper-button:focus,\n        paper-button:active,\n        paper-button:hover,\n        site-menu-button:focus,\n        site-menu-button:active,\n        site-menu-button:hover {\n          outline: 2px solid var(--haxcms-color);\n          outline-offset: 8px;\n        }\n        simple-datetime {\n          letter-spacing: -0.32px;\n          font-weight: 300;\n          font-style: normal;\n          font-size: 16px;\n          line-height: 1.3;\n          color: black;\n          display: inline-flex;\n        }\n      </style>\n      <div class=\"background-closer-image-wrap\">\n        <div\n          class=\"background-closer-image\"\n          style\\$=\"background-image: url([[manifest.metadata.theme.variables.image]])\"\n        ></div>\n      </div>\n      <div class=\"inner\">\n        <site-menu-button type=\"prev\" position=\"right\" label=\"Previous post\">\n          <simple-datetime\n            format=\"M jS\"\n            timestamp=\"[[nextChanged]]\"\n            unix\n            slot=\"suffix\"\n          >\n          </simple-datetime>\n          <span slot=\"suffix\">[[nextTitle]]</span>\n        </site-menu-button>\n        <site-menu-button type=\"next\" position=\"right\" label=\"Next post\">\n          <simple-datetime\n            format=\"M jS\"\n            timestamp=\"[[prevChanged]]\"\n            unix\n            slot=\"prefix\"\n          ></simple-datetime>\n          <span slot=\"prefix\">[[prevTitle]]</span>\n        </site-menu-button>\n        <paper-button raised on-click=\"_backButtonTap\"\n          >Back to list</paper-button\n        >\n        <h2 class=\"blog-title\">[[manifest.title]]</h2>\n        <h3 class=\"blog-description\">[[manifest.description]]</h3>\n      </div>\n    "]);
  
      _templateObject_f3a19810e53211e9a0cfefb808989d41 = function _templateObject_f3a19810e53211e9a0cfefb808989d41() {
        return data;
      };
  
      return data;
    }
  
    /**
     * `simple-blog-footer`
     * `Footer to blog posts`
     * @demo demo/index.html
     * @microcopy - the mental model for this element
     * - footer of the page for blog posts relating back to the main overview page
     */
    var SimpleBlogFooter =
    /*#__PURE__*/
    function (_PolymerElement) {
      babelHelpers.inherits(SimpleBlogFooter, _PolymerElement);
      babelHelpers.createClass(SimpleBlogFooter, [{
        key: "_activeManifestIndexChanged",
        value: function _activeManifestIndexChanged(newValue) {
          if (this.manifest.items[newValue - 1]) {
            this.prevTitle = " - " + this.manifest.items[newValue - 1].title;
            this.prevChanged = this.manifest.items[newValue - 1].metadata.created;
          } else {
            this.prevTitle = "";
            this.prevChanged = "";
          }
  
          if (this.manifest.items[newValue + 1]) {
            this.nextTitle = " - " + this.manifest.items[newValue + 1].title;
            this.nextChanged = this.manifest.items[newValue + 1].metadata.created;
          } else {
            this.nextTitle = "";
            this.nextChanged = "";
          }
        }
      }], [{
        key: "tag",
  
        /**
         * Store the tag name to make it easier to obtain directly.
         * @notice function name must be here for tooling to operate correctly
         */
        get: function get() {
          return "simple-blog-footer";
        } // render function
  
      }, {
        key: "template",
        get: function get() {
          return (0, _polymerElement.html)(_templateObject_f3a19810e53211e9a0cfefb808989d41());
        }
        /**
         * Mix in an opened status
         */
  
      }, {
        key: "properties",
        get: function get() {
          return {
            /**
             * active manifest index, key to location in the manifest itemsarray
             */
            activeManifestIndex: {
              type: Number,
              observer: "_activeManifestIndexChanged"
            },
  
            /**
             * Manifest, JSON Outline Schema object
             */
            manifest: {
              type: Object
            },
            editMode: {
              type: Boolean,
              reflectToAttribute: true
            }
          };
        }
      }]);
  
      function SimpleBlogFooter() {
        var _this;
  
        babelHelpers.classCallCheck(this, SimpleBlogFooter);
        _this = babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(SimpleBlogFooter).call(this));
        new Promise(function (res, rej) {
          return _require.default(["../../haxcms-elements/lib/ui-components/navigation/site-menu-button.js"], res, rej);
        });
        new Promise(function (res, rej) {
          return _require.default(["../../../@polymer/paper-button/paper-button.js"], res, rej);
        });
        new Promise(function (res, rej) {
          return _require.default(["../../simple-datetime/simple-datetime.js"], res, rej);
        });
        return _this;
      }
      /**
       * attached life cycle
       */
  
  
      babelHelpers.createClass(SimpleBlogFooter, [{
        key: "connectedCallback",
        value: function connectedCallback() {
          var _this2 = this;
  
          babelHelpers.get(babelHelpers.getPrototypeOf(SimpleBlogFooter.prototype), "connectedCallback", this).call(this);
          this.__disposer = [];
          (0, _mobxModule.autorun)(function (reaction) {
            _this2.manifest = (0, _mobxModule.toJS)(_haxcmsSiteStore.store.routerManifest);
  
            if ((0, _haxutils.varExists)(_this2.manifest, "title")) {
              document.title = _this2.manifest.title;
            }
  
            if ((0, _haxutils.varExists)(_this2.manifest, "metadata.theme.variables.cssVariable")) {
              // json outline schema changed, allow other things to react
              // fake way of forcing an update of these items
              var ary = _this2.manifest.metadata.theme.variables.cssVariable.replace("--simple-colors-default-theme-", "").split("-");
  
              ary.pop();
              _this2.accentColor = ary.join("-");
            }
  
            _this2.__disposer.push(reaction);
          });
          (0, _mobxModule.autorun)(function (reaction) {
            _this2.activeManifestIndex = (0, _mobxModule.toJS)(_haxcmsSiteStore.store.activeManifestIndex);
  
            _this2.__disposer.push(reaction);
          });
          (0, _mobxModule.autorun)(function (reaction) {
            _this2.editMode = (0, _mobxModule.toJS)(_haxcmsSiteStore.store.editMode);
  
            _this2.__disposer.push(reaction);
          });
        }
        /**
         * detatched life cycle
         */
  
      }, {
        key: "disconnectedCallback",
        value: function disconnectedCallback() {
          for (var i in this.__disposer) {
            this.__disposer[i].dispose();
          }
  
          babelHelpers.get(babelHelpers.getPrototypeOf(SimpleBlogFooter.prototype), "disconnectedCallback", this).call(this);
        }
        /**
         * Fire event to unset the global activeItem.
         */
  
      }, {
        key: "_backButtonTap",
        value: function _backButtonTap(e) {
          window.history.pushState(null, null, _haxcmsSiteStore.store.location.baseUrl);
          window.dispatchEvent(new PopStateEvent("popstate"));
        }
      }]);
      return SimpleBlogFooter;
    }(_polymerElement.PolymerElement);
  
    _exports.SimpleBlogFooter = SimpleBlogFooter;
    window.customElements.define(SimpleBlogFooter.tag, SimpleBlogFooter);
  });