define(["exports", "require", "../../lit-element/lit-element.js"], function (_exports, _require, _litElement) {
  "use strict";

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

  function _templateObject7_34952740d1d911ea92952ff2097cf814() {
    var data = babelHelpers.taggedTemplateLiteral(["\n        :host {\n          display: block;\n        }\n        :host([is-empty][hide-if-empty]) {\n          display: none;\n        }\n        :host([hidden]) {\n          display: none;\n        }\n        [hidden] {\n          display: none;\n        }\n        :host([mobile]) .wrapper,\n        :host([mobile]) .header,\n        :host([mobile]) .header .svg {\n          padding: 0;\n          margin: 0;\n        }\n        .wrapper {\n          display: inline-block;\n          padding: 8px;\n        }\n        .header {\n          display: flex;\n          color: var(--page-contents-menu-heading-color, #9daab6);\n          padding: 0 24px 0 0;\n          margin: 0 0 8px 0;\n        }\n        .header .svg {\n          padding-right: 6px;\n          display: inline-flex;\n          color: var(--page-contents-menu-link, #74818d);\n        }\n        svg {\n          width: 1em;\n          height: 1em;\n          vertical-align: middle;\n        }\n        .header .label {\n          align-items: center;\n          display: inline-flex;\n          font-size: var(--page-contents-menu-heading-font-size, 10px);\n          font-weight: var(--page-contents-menu-heading-font-weight, 700);\n          padding: 0;\n          margin: 0;\n          font-family: Content-font, Roboto, sans-serif;\n          line-height: 1;\n          letter-spacing: 1.2px;\n          text-transform: uppercase;\n        }\n\n        .contents {\n          margin: 0;\n          padding: 0;\n          list-style-type: none;\n        }\n        .item {\n          margin: 0;\n          display: block;\n          padding: 0;\n          overflow: hidden;\n          white-space: nowrap;\n          text-overflow: ellipsis;\n        }\n        .link {\n          font-family: Content-font, Roboto, sans-serif;\n          line-height: 1.5;\n          display: flex;\n          padding: 4px 16px 4px 24px;\n          font-size: var(--page-contents-menu-link-font-size, 12px);\n          text-decoration: none;\n          font-weight: var(--page-contents-menu-link-font-weight, 500);\n          color: var(--page-contents-menu-link, #74818d);\n          cursor: pointer;\n          margin: 0;\n          align-items: center;\n          vertical-align: middle;\n          -webkit-box-align: center;\n          overflow: hidden;\n          white-space: nowrap;\n          text-overflow: ellipsis;\n        }\n        .link:hover,\n        .link:focus,\n        .link:active {\n          text-decoration: underline;\n          color: var(--page-contents-menu-link-hover, rgb(56, 132, 255));\n        }\n        .link:focus {\n          outline: 1px solid var(--page-contents-menu-link, black);\n          outline-offset: 4px;\n        }\n        .indent-1 {\n          padding-left: 0px;\n        }\n        .indent-2 {\n          padding-left: 16px;\n        }\n        .indent-3,\n        .indent-4,\n        .indent-5,\n        .indent-6 {\n          padding-left: 32px;\n        }\n      "]);

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

    return data;
  }

  function _templateObject6_34952740d1d911ea92952ff2097cf814() {
    var data = babelHelpers.taggedTemplateLiteral(["\n      <li class=\"item\">\n        <a\n          class=\"link indent-", "\"\n          href=\"", "\"\n          @click=\"", "\"\n          @keypress=\"", "\"\n          data-index=\"", "\"\n          >", "</a\n        >\n      </li>\n    "]);

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

    return data;
  }

  function _templateObject5_34952740d1d911ea92952ff2097cf814() {
    var data = babelHelpers.taggedTemplateLiteral(["\n        <li class=\"item\">\n          <a\n            class=\"link indent-", "\"\n            tabindex=\"0\"\n            @click=\"", "\"\n            @keypress=\"", "\"\n            data-index=\"", "\"\n            >", "</a\n          >\n        </li>\n      "]);

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

    return data;
  }

  function _templateObject4_34952740d1d911ea92952ff2097cf814() {
    var data = babelHelpers.taggedTemplateLiteral(["\n              <ol class=\"contents\">\n                ", "\n              </ol>\n            "]);

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

    return data;
  }

  function _templateObject3_34952740d1d911ea92952ff2097cf814() {
    var data = babelHelpers.taggedTemplateLiteral(["\n              <simple-popover\n                class=\"dropdown pull-left font-settings js-toolbar-action settings-container\"\n                ?hidden=\"", "\"\n                auto\n              >\n                <ol class=\"contents\">\n                  ", "\n                </ol>\n              </simple-popover>\n            "]);

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

    return data;
  }

  function _templateObject2_34952740d1d911ea92952ff2097cf814() {
    var data = babelHelpers.taggedTemplateLiteral(["\n                <h2 class=\"label\">", "</h2>\n              "]);

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

    return data;
  }

  function _templateObject_34952740d1d911ea92952ff2097cf814() {
    var data = babelHelpers.taggedTemplateLiteral(["\n      <section class=\"wrapper\" role=\"navigation\">\n        <div class=\"header\">\n          <a\n            class=\"svg\"\n            @click=\"", "\"\n            @keypress=\"", "\"\n            id=\"popovertarget\"\n            aria-label=\"", "\"\n          >\n            <svg\n              preserveAspectRatio=\"xMidYMid meet\"\n              height=\"1em\"\n              width=\"1em\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke=\"currentColor\"\n              class=\"icon-7f6730be--text-3f89f380\"\n            >\n              <g>\n                <line x1=\"21\" y1=\"10\" x2=\"7\" y2=\"10\"></line>\n                <line x1=\"21\" y1=\"6\" x2=\"3\" y2=\"6\"></line>\n                <line x1=\"21\" y1=\"14\" x2=\"3\" y2=\"14\"></line>\n                <line x1=\"21\" y1=\"18\" x2=\"7\" y2=\"18\"></line>\n              </g>\n            </svg>\n          </a>\n          <simple-tooltip\n            for=\"popovertarget\"\n            offset=\"32\"\n            ?hidden=\"", "\"\n          >\n            ", "\n          </simple-tooltip>\n          ", "\n        </div>\n        ", "\n      </section>\n    "]);

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

    return data;
  }

  /**
   * `page-contents-menu`
   * `Links that jump you to the right place in the page&#39;s content`
   * @demo demo/index.html
   * @element page-contents-menu
   */
  var PageContentsMenu =
  /*#__PURE__*/
  function (_LitElement) {
    babelHelpers.inherits(PageContentsMenu, _LitElement);
    babelHelpers.createClass(PageContentsMenu, [{
      key: "render",
      // render function
      value: function render() {
        var _this2 = this;

        return (0, _litElement.html)(_templateObject_34952740d1d911ea92952ff2097cf814(), this.toggleSettings, this.keyToggle, this.label, !this.mobile || !this.hideSettings, this.label, !this.mobile ? (0, _litElement.html)(_templateObject2_34952740d1d911ea92952ff2097cf814(), this.label) : "", this.mobile ? (0, _litElement.html)(_templateObject3_34952740d1d911ea92952ff2097cf814(), this.hideSettings, this.items.map(function (item, index) {
          return _this2.renderItem(item, index);
        })) : (0, _litElement.html)(_templateObject4_34952740d1d911ea92952ff2097cf814(), this.items.map(function (item, index) {
          return _this2.renderItem(item, index);
        })));
      }
    }, {
      key: "keyToggle",
      value: function keyToggle(e) {
        if (["Enter", "Space"].includes(e.key)) {
          this.toggleSettings(e);
        }
      }
    }, {
      key: "keyScroll",
      value: function keyScroll(e) {
        if (e.key == "Enter") {
          this.scrollToObject(e);
        }
      }
    }, {
      key: "toggleSettings",
      value: function toggleSettings(e) {
        if (this.mobile) {
          this.hideSettings = !this.hideSettings;
        }
      }
    }, {
      key: "scrollToObject",
      value: function scrollToObject(e) {
        var target = null;

        if (e.path && e.path[0]) {
          target = e.path[0];
        } else if (e.originalTarget) {
          target = e.originalTarget;
        } else {
          target = e.target;
        }

        if (target.getAttribute("data-index")) {
          e.preventDefault();
          e.stopPropagation();
          e.stopImmediatePropagation();
          this.items[parseInt(target.getAttribute("data-index"))].object.scrollIntoView({
            behavior: "smooth",
            block: "start",
            inline: "nearest"
          }); // close menu

          this.hideSettings = true;
        }
      }
    }, {
      key: "renderItem",
      value: function renderItem(item, index) {
        if (item.link == null && item.object) {
          // tab index ensures browser treats it like a normal link
          return (0, _litElement.html)(_templateObject5_34952740d1d911ea92952ff2097cf814(), item.indent, this.scrollToObject, this.keyScroll, index, item.title);
        }

        return (0, _litElement.html)(_templateObject6_34952740d1d911ea92952ff2097cf814(), item.indent, item.link, this.scrollToObject, this.keyScroll, index, item.title);
      } // haxProperty definition

    }], [{
      key: "styles",
      //styles function
      get: function get() {
        return [(0, _litElement.css)(_templateObject7_34952740d1d911ea92952ff2097cf814())];
      }
    }, {
      key: "haxProperties",
      get: function get() {
        return {
          canScale: true,
          canPosition: true,
          canEditSource: false,
          gizmo: {
            title: "Page contents-menu",
            description: "Links that jump you to the right place in the page's content",
            icon: "icons:android",
            color: "green",
            groups: ["Contents"],
            handles: [{
              type: "todo:read-the-docs-for-usage"
            }],
            meta: {
              author: "btopro",
              owner: "The Pennsylvania State University"
            }
          },
          settings: {
            quick: [],
            configure: [],
            advanced: []
          }
        };
      } // properties available to the custom element for data binding

    }, {
      key: "properties",
      get: function get() {
        return {
          contentContainer: {
            type: Object
          },
          relationship: {
            type: String
          },
          items: {
            type: Array
          },
          mobile: {
            type: Boolean,
            reflect: true
          },
          label: {
            type: String
          },
          hideSettings: {
            type: Boolean
          },
          hideIfEmpty: {
            type: Boolean,
            attribute: "hide-if-empty",
            reflect: true
          },
          isEmpty: {
            type: Boolean,
            attribute: "is-empty",
            reflect: true
          }
        };
      }
      /**
       * Convention we use
       */

    }, {
      key: "tag",
      get: function get() {
        return "page-contents-menu";
      }
      /**
       * HTMLElement
       */

    }]);

    function PageContentsMenu() {
      var _this;

      babelHelpers.classCallCheck(this, PageContentsMenu);
      _this = babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(PageContentsMenu).call(this)); // default is to use the parent container unless a content container
      // is defined otherwise. This would imply usage of placing this at the TOP of
      // content area though next, pervious and none are valid

      _this.relationship = null;
      _this.items = [];
      _this.isEmpty = true;
      _this.hideIfEmpty = false;
      _this.contentContainer = null;
      _this.mobile = false; // only useful with mobile

      _this.hideSettings = true;
      _this.label = "Contents"; // so we can close the menu

      window.addEventListener("click", _this.checkMenuOpen.bind(babelHelpers.assertThisInitialized(_this))); // default to all hierarchy tags to obtain mini-menu
      // opens the door for us adding OTHER tags in the future

      _this.hierarchyTags = ["h1", "h2", "h3", "h4", "h5", "h6"];
      return _this;
    }

    babelHelpers.createClass(PageContentsMenu, [{
      key: "checkMenuOpen",
      value: function checkMenuOpen(e) {
        var target = null;

        if (e.path && e.path[0]) {
          target = e.path;
        } else if (e.originalTarget) {
          target = [e.originalTarget];
        } else {
          target = [e.target];
        }

        if (this.mobile && !this.hideSettings && !target.includes(this.__toggleTarget) && !target.includes(this.shadowRoot.querySelector("simple-popover"))) {
          this.hideSettings = true;
        }
      }
    }, {
      key: "firstUpdated",
      value: function firstUpdated() {
        // if we are told to use the parent and we're connected...
        if (this.relationship == "parent") {
          // which will kick that off
          this.contentContainer = this.parentElement;
        } else if (this.relationship == "next") {
          // which will kick that off
          this.contentContainer = this.nextElementSibling;
        } else if (this.relationship == "previous") {
          // which will kick that off
          this.contentContainer = this.previousElementSibling;
        } // anything else we ignore sot hat contentContainer can be set manually
        else {}
      }
      /**
       * LitElement life cycle - property changed
       */

    }, {
      key: "updated",
      value: function updated(changedProperties) {
        var _this3 = this;

        changedProperties.forEach(function (oldValue, propName) {
          /* notify example
          // notify
          if (propName == 'format') {
            this.dispatchEvent(
              new CustomEvent(`${propName}-changed`, {
                detail: {
                  value: this[propName],
                }
              })
            );
          }
          */
          if (propName == "contentContainer") {
            _this3._contentContainerChanged(_this3[propName]);
          } // dynamic import pop over if we go mobile mode


          if (propName == "mobile") {
            if (_this3[propName]) {
              new Promise(function (res, rej) {
                return _require.default(["../simple-popover/simple-popover.js"], res, rej);
              }).then(function (module) {
                setTimeout(function () {
                  // hook up the pop over menu
                  _this3.__toggleTarget = _this3.shadowRoot.querySelector("#popovertarget");

                  _this3.__toggleTarget.setAttribute("tabindex", "0");

                  _this3.shadowRoot.querySelector("simple-popover").target = _this3.__toggleTarget;
                }, 0);
              });
              new Promise(function (res, rej) {
                return _require.default(["../simple-tooltip/simple-tooltip.js"], res, rej);
              });
            } else if (oldValue && !_this3[propName]) {
              _this3.__toggleTarget.removeAttribute("tabindex");
            }
          }
          /* computed example
          if (['id', 'selected'].includes(propName)) {
            this.__selectedChanged(this.selected, this.id);
          }
          */

        });
      }
      /**
       * Update the menu. This can be run manually to easily wire into mutationobservers
       * or other events that modify what's in the content container node without
       * constantly monitoring it for changes.
       */

    }, {
      key: "updateMenu",
      value: function updateMenu() {
        var validTags = this.hierarchyTags;
        var items = []; // loop over the new nodes

        for (var i = 0; i < this.contentContainer.childNodes.length; i++) {
          // verify this tag is a valid one
          var item = this.contentContainer.childNodes[i];

          if (babelHelpers.typeof(item.tagName) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined)) && validTags.includes(item.tagName.toLowerCase())) {
            var reference = {
              title: item.innerText,
              link: item.id ? "#" + item.id : null,
              object: item,
              indent: parseInt(item.tagName.toLowerCase().replace("h", ""))
            };
            items.push(reference);
          }
        }

        if (items.length === 0) {
          this.isEmpty = true;
        } else {
          this.isEmpty = false;
        }

        this.items = [].concat(items);
      }
      /**
       * When our content container changes, process the hierarchy in question
       */

    }, {
      key: "_contentContainerChanged",
      value: function _contentContainerChanged(newValue) {
        // simple test that this has content in it to parse
        if (newValue && newValue.childNodes && newValue.childNodes.length > 0) {
          this.updateMenu();
        }
      }
    }]);
    return PageContentsMenu;
  }(_litElement.LitElement);

  _exports.PageContentsMenu = PageContentsMenu;
  customElements.define(PageContentsMenu.tag, PageContentsMenu);
});