{"size": 9909, "ext": "js", "max_stars_repo_path": "build/es5-amd/node_modules/@lrnwebcomponents/haxcms-elements/lib/core/themes/haxcms-slide-theme.js", "max_stars_repo_name": "profmikegreene/HAXcms", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "build/es5-amd/node_modules/@lrnwebcomponents/haxcms-elements/lib/core/themes/haxcms-slide-theme.js", "max_issues_repo_name": "profmikegreene/HAXcms", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "build/es5-amd/node_modules/@lrnwebcomponents/haxcms-elements/lib/core/themes/haxcms-slide-theme.js", "max_forks_repo_name": "profmikegreene/HAXcms", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 78.6428571429, "max_line_length": 5211, "alphanum_fraction": 0.5500050459}
define(["exports", "require", "../../../../../@polymer/polymer/polymer-element.js", "../HAXCMSThemeWiring.js", "../../../../../@polymer/polymer/lib/utils/render-status.js", "../haxcms-site-store.js", "../../../../../mobx/lib/mobx.module.js", "../../../../simple-colors/simple-colors.js", "../../../../hax-body/lib/hax-shared-styles.js"], function (_exports, _require, _polymerElement, _HAXCMSThemeWiring, _renderStatus, _haxcmsSiteStore, _mobxModule, _simpleColors, _haxSharedStyles) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.HAXCMSSlideTheme = void 0;
  _require = babelHelpers.interopRequireWildcard(_require);

  function _templateObject_0ea38100e53311e9a0cfefb808989d41() {
    var data = babelHelpers.taggedTemplateLiteral(["\n      <style include=\"hax-shared-styles simple-colors-shared-styles\">\n        :host {\n          display: block;\n        }\n        /**\n         * Hide the slotted content during edit mode. This must be here to work.\n         */\n        :host([edit-mode]) #slot {\n          display: none;\n        }\n        .active-slide {\n          width: 100vw;\n          padding: 16px;\n          margin: 0;\n          position: fixed;\n          top: 0;\n          bottom: 60px;\n          overflow: scroll;\n          border-bottom: 4px solid var(--haxcms-color, black);\n        }\n        :host([edit-mode]) .active-slide {\n          bottom: 0;\n          overflow: scroll;\n          border-bottom: unset;\n        }\n        .controls:hover {\n          background-color: rgba(0, 0, 0, 1);\n        }\n        .controls {\n          transition: all 0.2s ease-in-out;\n          background-color: rgba(0, 0, 0, 0.8);\n          color: white;\n          display: inline-flex;\n          height: 60px;\n          width: 200px;\n          line-height: 60px;\n          justify-content: center;\n          vertical-align: middle;\n          height: 60px;\n          font-size: 16px;\n        }\n        .counter {\n          width: 100%;\n          justify-content: center;\n          vertical-align: middle;\n          display: inline-flex;\n        }\n        site-menu-button {\n          --site-menu-button-link: {\n            color: #ffffff;\n          }\n          --site-menu-button-button: {\n            height: 60px;\n            width: 60px;\n            padding: 0;\n            margin: 0;\n            line-height: 60px;\n          }\n          --site-menu-button-button-hover: {\n            color: var(--haxcms-color, yellow);\n          }\n        }\n        site-menu-button:hover,\n        site-menu-button:focus,\n        site-menu-button:active {\n          outline: 1px dashed var(--haxcms-color, yellow);\n          outline-offset: -1px;\n        }\n        .site-label-wrapper {\n          display: inline-flex;\n          vertical-align: middle;\n          height: 60px;\n        }\n        site-print-button {\n          display: inline-flex;\n          margin: 8px;\n        }\n        site-title {\n          display: inline-flex;\n          margin: 0 0 0 32px;\n          --site-title-link: {\n            text-decoration: none;\n          }\n          --site-title-heading: {\n            color: black;\n            font-size: 28px;\n            margin: 0;\n            padding: 0;\n          }\n        }\n        site-active-title {\n          display: inline-flex;\n          padding: 0 32px;\n          margin: 0 0 0 16px;\n          border-left: 4px solid var(--haxcms-color, black);\n          --site-active-title-heading: {\n            color: black;\n            font-size: 28px;\n            margin: 0;\n            padding: 0;\n          }\n        }\n        site-dot-indicator {\n          display: inline-flex;\n          padding: 0 32px;\n          border-right: 4px solid var(--haxcms-color, black);\n          --site-dot-indicator-color: var(--haxcms-color, black);\n        }\n        .bottom-wrapper {\n          z-index: 2;\n          position: fixed;\n          bottom: 0;\n          height: 60px;\n          left: 0;\n          right: 0;\n          transition: 0.2s opacity linear;\n          opacity: 1;\n        }\n        :host([edit-mode]) .bottom-wrapper {\n          opacity: 0;\n          pointer-events: none;\n        }\n        @media screen and (max-width: 900px) {\n          site-title {\n            display: none;\n          }\n        }\n        @media screen and (max-width: 800px) {\n          site-active-title {\n            display: none;\n          }\n        }\n        @media screen and (max-width: 700px) {\n          site-print-button {\n            display: none;\n          }\n          site-label-wrapper {\n            display: inline-block;\n          }\n        }\n      </style>\n      <div class=\"active-slide\">\n        <div id=\"contentcontainer\">\n          <div id=\"slot\"><slot></slot></div>\n        </div>\n      </div>\n      <div class=\"bottom-wrapper\">\n        <div class=\"controls\">\n          <site-menu-button\n            type=\"prev\"\n            label=\"Previous\"\n            position=\"top\"\n          ></site-menu-button>\n          <div class=\"counter\">\n            [[activeManifestIndexCounter]] / [[manifestLength]]\n          </div>\n          <site-menu-button\n            type=\"next\"\n            label=\"Next\"\n            position=\"top\"\n          ></site-menu-button>\n        </div>\n        <div class=\"site-label-wrapper\">\n          <site-dot-indicator></site-dot-indicator>\n          <site-title></site-title>\n          <site-print-button\n            type=\"page\"\n            label=\"Print slide\"\n            position=\"top\"\n          ></site-print-button>\n          <site-print-button\n            type=\"site\"\n            label=\"Print All slides\"\n            position=\"top\"\n          ></site-print-button>\n          <site-active-title></site-active-title>\n        </div>\n      </div>\n    "]);

    _templateObject_0ea38100e53311e9a0cfefb808989d41 = function _templateObject_0ea38100e53311e9a0cfefb808989d41() {
      return data;
    };

    return data;
  }

  /**
   * `haxcms-slide-theme`
   * `A simple slide playing theme`
   *
   * @customElement
   * @polymer
   * @demo demo/index.html
   */
  var HAXCMSSlideTheme =
  /*#__PURE__*/
  function (_HAXCMSTheme) {
    babelHelpers.inherits(HAXCMSSlideTheme, _HAXCMSTheme);

    function HAXCMSSlideTheme() {
      var _this;

      babelHelpers.classCallCheck(this, HAXCMSSlideTheme);
      _this = babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(HAXCMSSlideTheme).call(this));
      _this.__disposer = [];
      new Promise(function (res, rej) {
        return _require.default(["../../ui-components/site/site-title.js"], res, rej);
      });
      new Promise(function (res, rej) {
        return _require.default(["../../ui-components/site/site-print-button.js"], res, rej);
      });
      new Promise(function (res, rej) {
        return _require.default(["../../ui-components/active-item/site-active-title.js"], res, rej);
      });
      new Promise(function (res, rej) {
        return _require.default(["../../ui-components/navigation/site-dot-indicator.js"], res, rej);
      });
      new Promise(function (res, rej) {
        return _require.default(["../../ui-components/navigation/site-menu-button.js"], res, rej);
      });
      new Promise(function (res, rej) {
        return _require.default(["../../../../../@polymer/paper-icon-button/paper-icon-button.js"], res, rej);
      });
      new Promise(function (res, rej) {
        return _require.default(["../../../../../@polymer/iron-icons/iron-icons.js"], res, rej);
      });
      new Promise(function (res, rej) {
        return _require.default(["../../../../../@polymer/paper-tooltip/paper-tooltip.js"], res, rej);
      });
      return _this;
    }
    /**
     * Store the tag name to make it easier to obtain directly.
     * @notice function name must be here for tooling to operate correctly
     */


    babelHelpers.createClass(HAXCMSSlideTheme, [{
      key: "connectedCallback",

      /**
       * Connect state and theme wiring
       */
      value: function connectedCallback() {
        babelHelpers.get(babelHelpers.getPrototypeOf(HAXCMSSlideTheme.prototype), "connectedCallback", this).call(this);
        (0, _renderStatus.afterNextRender)(this, function () {
          var _this2 = this;

          // store disposer so we can clean up later
          (0, _mobxModule.autorun)(function (reaction) {
            _this2.manifestLength = (0, _mobxModule.toJS)(_haxcmsSiteStore.store.routerManifest.items.length);

            _this2.__disposer.push(reaction);
          });
          (0, _mobxModule.autorun)(function (reaction) {
            _this2.activeManifestIndexCounter = (0, _mobxModule.toJS)(_haxcmsSiteStore.store.activeManifestIndexCounter);

            _this2.__disposer.push(reaction);
          });
        });
      }
      /**
       * Disconnect the wiring for the theme and clean up state
       */

    }, {
      key: "disconnectedCallback",
      value: function disconnectedCallback() {
        // clean up state
        for (var i in this.__disposer) {
          this.__disposer[i].dispose();
        }

        babelHelpers.get(babelHelpers.getPrototypeOf(HAXCMSSlideTheme.prototype), "disconnectedCallback", this).call(this);
      }
    }], [{
      key: "tag",
      get: function get() {
        return "haxcms-slide-theme";
      } // render function

    }, {
      key: "template",
      get: function get() {
        return (0, _polymerElement.html)(_templateObject_0ea38100e53311e9a0cfefb808989d41());
      }
    }]);
    return HAXCMSSlideTheme;
  }((0, _HAXCMSThemeWiring.HAXCMSTheme)(_polymerElement.PolymerElement));

  _exports.HAXCMSSlideTheme = HAXCMSSlideTheme;
  window.customElements.define(HAXCMSSlideTheme.tag, HAXCMSSlideTheme);
});