text: define(["exports", "../../../@polymer/polymer/polymer-element.js", "../../../@polymer/polymer/lib/utils/render-status.js", "../../../@polymer/polymer/lib/legacy/polymer.dom.js", "../../lrndesign-avatar/lrndesign-avatar.js", "../../../@polymer/iron-collapse/iron-collapse.js", "../../../@polymer/iron-icon/iron-icon.js", "../../../@polymer/iron-behaviors/iron-button-state.js", "../../../@polymer/paper-button/paper-button.js"], function (_exports, _polymerElement, _renderStatus, _polymerDom, _lrndesignAvatar, _ironCollapse, _ironIcon, _ironButtonState, _paperButton) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.MapMenuHeader = void 0;
  
    function _templateObject_eb863f00e53211e9a0cfefb808989d41() {
      var data = babelHelpers.taggedTemplateLiteral(["\n      <style>\n        :host {\n          display: block;\n          transition: 0.2s all ease-in-out;\n          transition-delay: 0.2s;\n          --map-menu-item-height: 16px;\n        }\n\n        :host([active]) {\n          background: var(--map-menu-active-color);\n          @apply --map-menu-item-active-item;\n        }\n\n        #container {\n          display: flex;\n          align-items: center;\n        }\n\n        #avatarLabel {\n          margin-right: 10px;\n        }\n\n        #center {\n          flex: 1 1 auto;\n        }\n\n        a,\n        a:hover,\n        a:visited,\n        a:focus {\n          color: var(--map-menu-header-a-color, inherit);\n          text-decoration: var(--map-menu-header-a-text-decoration, inherit);\n        }\n\n        lrndesign-avatar {\n          display: inline-block;\n          background: #fff;\n          border-radius: 50%;\n          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);\n          padding: 2px;\n          position: relative;\n          margin-top: -2px;\n          transform: translateY(2px);\n        }\n\n        #link {\n          display: flex;\n          justify-content: flex-start;\n          align-items: flex-start;\n          flex-direction: column;\n        }\n\n        .title {\n          font-size: var(--map-menu-font-size, 16px);\n        }\n\n        #right iron-icon {\n          display: inline-block;\n          color: gray;\n        }\n\n        /* @todo this is a hack */\n        #icon iron-icon {\n          display: inline-block;\n          --iron-icon-height: var(--map-menu-item-height);\n          transform: translateX(10px);\n        }\n\n        paper-button {\n          text-transform: none;\n        }\n      </style>\n      <div id=\"container\">\n        <div hidden$=\"[[!avatarLabel]]\" id=\"avatarLabel\">\n          <lrndesign-avatar label=\"[[avatarLabel]]\"></lrndesign-avatar>\n        </div>\n        <div hidden$=\"[[!icon]]\" id=\"icon\">\n          <iron-icon icon=\"[[icon]]\"></iron-icon>\n        </div>\n        <div id=\"center\">\n          <a tabindex=\"-1\" href$=\"[[url]]\">\n            <paper-button class=\"title\" noink=\"\" role$=\"[[__titleRole()]]\">\n              <div id=\"label\">[[label]]</div>\n              <div class=\"title\">[[title]]</div>\n            </paper-button>\n          </a>\n        </div>\n        <div id=\"right\">\n          <iron-icon\n            id=\"toggle\"\n            icon=\"[[__collapseIcon]]\"\n            aria-role=\"button\"\n            aria-label$=\"[[__collapseAria]]\"\n            tabindex=\"0\"\n          ></iron-icon>\n        </div>\n      </div>\n    "], ["\n      <style>\n        :host {\n          display: block;\n          transition: 0.2s all ease-in-out;\n          transition-delay: 0.2s;\n          --map-menu-item-height: 16px;\n        }\n\n        :host([active]) {\n          background: var(--map-menu-active-color);\n          @apply --map-menu-item-active-item;\n        }\n\n        #container {\n          display: flex;\n          align-items: center;\n        }\n\n        #avatarLabel {\n          margin-right: 10px;\n        }\n\n        #center {\n          flex: 1 1 auto;\n        }\n\n        a,\n        a:hover,\n        a:visited,\n        a:focus {\n          color: var(--map-menu-header-a-color, inherit);\n          text-decoration: var(--map-menu-header-a-text-decoration, inherit);\n        }\n\n        lrndesign-avatar {\n          display: inline-block;\n          background: #fff;\n          border-radius: 50%;\n          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);\n          padding: 2px;\n          position: relative;\n          margin-top: -2px;\n          transform: translateY(2px);\n        }\n\n        #link {\n          display: flex;\n          justify-content: flex-start;\n          align-items: flex-start;\n          flex-direction: column;\n        }\n\n        .title {\n          font-size: var(--map-menu-font-size, 16px);\n        }\n\n        #right iron-icon {\n          display: inline-block;\n          color: gray;\n        }\n\n        /* @todo this is a hack */\n        #icon iron-icon {\n          display: inline-block;\n          --iron-icon-height: var(--map-menu-item-height);\n          transform: translateX(10px);\n        }\n\n        paper-button {\n          text-transform: none;\n        }\n      </style>\n      <div id=\"container\">\n        <div hidden$=\"[[!avatarLabel]]\" id=\"avatarLabel\">\n          <lrndesign-avatar label=\"[[avatarLabel]]\"></lrndesign-avatar>\n        </div>\n        <div hidden$=\"[[!icon]]\" id=\"icon\">\n          <iron-icon icon=\"[[icon]]\"></iron-icon>\n        </div>\n        <div id=\"center\">\n          <a tabindex=\"-1\" href$=\"[[url]]\">\n            <paper-button class=\"title\" noink=\"\" role\\$=\"[[__titleRole()]]\">\n              <div id=\"label\">[[label]]</div>\n              <div class=\"title\">[[title]]</div>\n            </paper-button>\n          </a>\n        </div>\n        <div id=\"right\">\n          <iron-icon\n            id=\"toggle\"\n            icon=\"[[__collapseIcon]]\"\n            aria-role=\"button\"\n            aria-label$=\"[[__collapseAria]]\"\n            tabindex=\"0\"\n          ></iron-icon>\n        </div>\n      </div>\n    "]);
  
      _templateObject_eb863f00e53211e9a0cfefb808989d41 = function _templateObject_eb863f00e53211e9a0cfefb808989d41() {
        return data;
      };
  
      return data;
    }
  
    var MapMenuHeader =
    /*#__PURE__*/
    function (_PolymerElement) {
      babelHelpers.inherits(MapMenuHeader, _PolymerElement);
  
      function MapMenuHeader() {
        babelHelpers.classCallCheck(this, MapMenuHeader);
        return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(MapMenuHeader).apply(this, arguments));
      }
  
      babelHelpers.createClass(MapMenuHeader, [{
        key: "_openedChanged",
        value: function _openedChanged(newValue, oldValue) {
          if (newValue) {
            this.__collapseIcon = "arrow-drop-down";
            this.__collapseAria = "collapse menu";
          } else {
            this.__collapseIcon = "arrow-drop-up";
            this.__collapseAria = "expand menu";
          }
        }
      }, {
        key: "__selectedChanged",
        value: function __selectedChanged(selected, id) {
          if (selected === id) {
            this.dispatchEvent(new CustomEvent("active-item", {
              bubbles: true,
              cancelable: true,
              composed: true,
              detail: this
            }));
          }
        }
      }, {
        key: "connectedCallback",
        value: function connectedCallback() {
          babelHelpers.get(babelHelpers.getPrototypeOf(MapMenuHeader.prototype), "connectedCallback", this).call(this);
          this.dispatchEvent(new CustomEvent("child-attached", {
            bubbles: true,
            cancelable: true,
            composed: true,
            detail: {
              id: this.id
            }
          }));
          (0, _renderStatus.afterNextRender)(this, function () {
            this.addEventListener("click", this.__tap.bind(this));
            this.addEventListener("keypress", this.__keypress.bind(this));
          });
        }
      }, {
        key: "disconnectedCallback",
        value: function disconnectedCallback() {
          this.removeEventListener("click", this.__tap.bind(this));
          this.removeEventListener("keypress", this.__keypress.bind(this));
          babelHelpers.get(babelHelpers.getPrototypeOf(MapMenuHeader.prototype), "disconnectedCallback", this).call(this);
        }
      }, {
        key: "__tap",
        value: function __tap(e) {
          // send to toggle event
          this.__toggleEventHandler(e);
        }
      }, {
        key: "__keypress",
        value: function __keypress(e) {
          // send to toggle event
          if (e.code === "Enter") {
            this.__toggleEventHandler(e);
          }
        }
      }, {
        key: "__toggleEventHandler",
        value: function __toggleEventHandler(e) {
          var rootTarget = (0, _polymerDom.dom)(e).rootTarget;
  
          if (typeof rootTarget !== "undefined") {
            if (typeof rootTarget.id !== "undefined" && rootTarget.id === "toggle") {
              this.dispatchEvent(new CustomEvent("toggle-header", {
                bubbles: true,
                cancelable: true,
                composed: true,
                detail: true
              }));
            }
          }
        }
      }], [{
        key: "template",
        get: function get() {
          return (0, _polymerElement.html)(_templateObject_eb863f00e53211e9a0cfefb808989d41());
        }
      }, {
        key: "tag",
        get: function get() {
          return "map-menu-header";
        }
      }, {
        key: "properties",
        get: function get() {
          return {
            title: {
              type: String
            },
            label: {
              type: String
            },
            avatarLabel: {
              type: String,
              value: ""
            },
            opened: {
              type: Boolean,
              observer: "_openedChanged"
            },
            url: {
              type: String,
              value: ""
            },
            id: {
              type: String,
              reflectToAttribute: true
            },
            icon: {
              type: String
            },
            active: {
              type: Boolean,
              reflectToAttribute: true,
              value: false
            },
            selected: {
              type: String,
              reflectToAttribute: true
            }
          };
        }
      }, {
        key: "observers",
        get: function get() {
          return ["__selectedChanged(selected, id)"];
        }
      }]);
      return MapMenuHeader;
    }(_polymerElement.PolymerElement);
  
    _exports.MapMenuHeader = MapMenuHeader;
    window.customElements.define(MapMenuHeader.tag, MapMenuHeader);
  });