text: define(["exports", "meta", "require", "../../../@polymer/polymer/polymer-element.js", "../../../@polymer/polymer/lib/utils/render-status.js", "../../simple-colors/simple-colors.js", "./hax-panel-item.js", "./hax-shared-styles.js"], function (_exports, meta, _require, _polymerElement, _renderStatus, _simpleColors, _haxPanelItem, _haxSharedStyles) {
    "use strict";
  
    Object.defineProperty(_exports, "__esModule", {
      value: true
    });
    _exports.HaxPanel = void 0;
    meta = babelHelpers.interopRequireWildcard(meta);
    _require = babelHelpers.interopRequireWildcard(_require);
  
    function _templateObject_466b2a10c3a111e99204fd28bf05b7e9() {
      var data = babelHelpers.taggedTemplateLiteral(["\n      <style include=\"simple-colors-shared-styles hax-shared-styles\">\n        :host {\n          display: block;\n          position: absolute;\n          z-index: 1000000;\n        }\n        :host *[hidden] {\n          display: none;\n        }\n        iron-icon:not(:defined),\n        hax-panel-item:not(:defined),\n        app-drawer:not(:defined) {\n          display: none;\n        }\n        app-drawer {\n          z-index: 100001;\n          height: 40px;\n          padding: 8px 16px;\n          left: 0;\n          top: 0;\n          align-items: center;\n          touch-action: auto;\n          visibility: hidden;\n          opacity: 0;\n          display: flex;\n          --app-drawer-width: 100%;\n          --app-drawer-content-container: {\n            align-items: center;\n            width: 100%;\n            left: 0;\n            right: 0;\n            background-color: var(--hax-color-bg);\n            border: 1px solid var(--hax-color-bg-accent);\n            padding: 0 16px;\n            display: flex;\n            touch-action: auto;\n            overflow-x: auto;\n            overflow: visible !important;\n            -webkit-overflow-scrolling: touch;\n            white-space: nowrap;\n          }\n        }\n        hax-panel-item {\n          margin: 8px 2px;\n        }\n        hax-panel-item[right] {\n          float: right;\n        }\n        #haxcancelbutton {\n          margin-right: 48px;\n        }\n        :host([edit-mode]) app-drawer {\n          visibility: visible;\n          transition: 0.3s ease opacity;\n          opacity: 1;\n          right: 0;\n          left: 0;\n          top: 0;\n        }\n\n        #button {\n          position: fixed;\n          top: 0;\n          left: 0;\n          visibility: visible;\n          z-index: 10000;\n          transition: all 0.3s ease;\n          margin: 0;\n          border-top-left-radius: 0;\n          @apply --hax-panel-edit-button;\n        }\n        :host([edit-mode]) #button {\n          visibility: hidden;\n          opacity: 0;\n        }\n        #button:hover {\n          opacity: 1;\n        }\n        :host([align=\"right\"]) #button {\n          right: 0;\n          left: unset;\n          border-top-right-radius: 0;\n          border-top-left-radius: unset;\n        }\n        .active-op-name,\n        .editing-mode-active {\n          display: none;\n        }\n        :host([edit-mode]) .active-op-name {\n          display: flex;\n          top: 0;\n          right: 0;\n          z-index: 1000000;\n          position: fixed;\n          font-size: 14px;\n          font-weight: bold;\n          padding: 16px 28px 16px 16px;\n          line-height: 24px;\n          height: 24px;\n          min-width: 120px;\n          justify-content: space-evenly;\n          background-color: var(--hax-color-bg-accent);\n          color: var(--hax-color-text);\n          vertical-align: middle;\n        }\n        :host([edit-mode]) .editing-mode-active {\n          display: flex;\n          font-size: 18px;\n          margin-left: 100px;\n          font-weight: bold;\n          color: var(--hax-color-text);\n        }\n        @media screen and (max-width: 600px) {\n          :host([edit-mode]) .hide-small {\n            display: none;\n          }\n        }\n        @media screen and (max-width: 800px) {\n          :host([edit-mode]) #haxcancelbutton {\n            margin-right: 2px;\n          }\n          :host([edit-mode]) .editing-mode-active,\n          :host([edit-mode]) .active-op-name {\n            display: none;\n          }\n        }\n      </style>\n      <div hidden$=\"[[hidePanelOps]]\">\n        <hax-panel-item\n          dark\n          large\n          data-opened$=\"[[editMode]]\"\n          on-click=\"_clickEditButton\"\n          icon=\"create\"\n          id=\"button\"\n          label=\"[[__tipText]]\"\n        ></hax-panel-item>\n      </div>\n      <app-drawer\n        id=\"drawer\"\n        opened=\"{{editMode}}\"\n        disable-swipe\n        persistent\n        transition-duration=\"300\"\n      >\n        <hax-panel-item\n          hidden$=\"[[hidePanelOps]]\"\n          on-click=\"_clickSaveButton\"\n          icon=\"save\"\n          id=\"haxsavebutton\"\n          label=\"[[__tipText]]\"\n          event-name=\"save\"\n          voice-command=\"save content\"\n        ></hax-panel-item>\n        <hax-panel-item\n          hidden$=\"[[hidePanelOps]]\"\n          icon=\"cancel\"\n          id=\"haxcancelbutton\"\n          label=\"Cancel\"\n          event-name=\"cancel\"\n          voice-command=\"cancel hax\"\n        ></hax-panel-item>\n        <hax-panel-item\n          icon=\"image:add-to-photos\"\n          label=\"Add\"\n          event-name=\"hax-manager-open\"\n          value=\"0\"\n        ></hax-panel-item>\n        <hax-panel-item\n          icon=\"search\"\n          label=\"Find\"\n          event-name=\"hax-manager-open\"\n          value=\"1\"\n        ></hax-panel-item>\n        <hax-panel-item\n          icon=\"hardware:toys\"\n          label=\"Make\"\n          event-name=\"hax-manager-open\"\n          value=\"2\"\n        ></hax-panel-item>\n        <hax-panel-item\n          icon=\"view-quilt\"\n          label=\"Layouts\"\n          event-name=\"hax-blox-picker-open\"\n          voice-command=\"insert block\"\n        ></hax-panel-item>\n        <hax-panel-item\n          icon=\"view-agenda\"\n          label=\"Templates\"\n          event-name=\"hax-stax-picker-open\"\n          voice-command=\"insert stack\"\n        ></hax-panel-item>\n        <hax-panel-item\n          icon=\"editor:short-text\"\n          label=\"Paragraph\"\n          event-name=\"text\"\n          voice-command=\"insert text\"\n          class=\"hide-small\"\n        ></hax-panel-item>\n        <hax-panel-item\n          icon=\"editor:title\"\n          label=\"Heading\"\n          event-name=\"header\"\n          voice-command=\"insert heading\"\n          class=\"hide-small\"\n        ></hax-panel-item>\n        <hax-panel-item\n          icon=\"editor:space-bar\"\n          label=\"Divider\"\n          event-name=\"divider\"\n          voice-command=\"insert divider\"\n          class=\"hide-small\"\n        ></hax-panel-item>\n        <hax-panel-item\n          icon=\"image:transform\"\n          label=\"Placeholder\"\n          event-name=\"placeholder\"\n          voice-command=\"insert placeholder\"\n          class=\"hide-small\"\n        ></hax-panel-item>\n        <hax-panel-item\n          hidden$=\"[[hideExportButton]]\"\n          on-click=\"_htmlExportDialog\"\n          icon=\"code\"\n          label=\"Source view\"\n        ></hax-panel-item>\n        <slot></slot>\n        <hax-panel-item\n          right\n          hidden$=\"[[hidePreferencesButton]]\"\n          on-click=\"_preferencesDialog\"\n          icon=\"settings\"\n          label=\"Preferences\"\n        ></hax-panel-item>\n        <div class=\"editing-mode-active\">[[editModeName]]</div>\n      </app-drawer>\n      <div class=\"active-op-name\">[[activeOperationName]]</div>\n    "]);
  
      _templateObject_466b2a10c3a111e99204fd28bf05b7e9 = function _templateObject_466b2a10c3a111e99204fd28bf05b7e9() {
        return data;
      };
  
      return data;
    }
  
    /**
    `hax-panel`
    A LRN element that provides a panel / pallet of options to choose from.
    This is intended to be placed in a larger system for creating content quickly
    as the events being bubbled up include HTML nodes to inject into something
    
    * @demo demo/index.html
    
    @microcopy - the mental model for this element
     - panel - the flyout from left or right side that has elements that can be placed
     - element - buttons on the panel which when pressed will trigger an event
    
    */
    var HaxPanel =
    /*#__PURE__*/
    function (_PolymerElement) {
      babelHelpers.inherits(HaxPanel, _PolymerElement);
  
      function HaxPanel() {
        babelHelpers.classCallCheck(this, HaxPanel);
        return babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(HaxPanel).call(this));
      }
  
      babelHelpers.createClass(HaxPanel, [{
        key: "ready",
  
        /**
         * Attached to the DOM; now we can fire event to the store that
         * we exist and are the thing being edited.
         */
        value: function ready() {
          babelHelpers.get(babelHelpers.getPrototypeOf(HaxPanel.prototype), "ready", this).call(this);
          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/iron-icons/editor-icons.js"], res, rej);
          });
          new Promise(function (res, rej) {
            return _require.default(["../../../@polymer/iron-icons/device-icons.js"], res, rej);
          });
          new Promise(function (res, rej) {
            return _require.default(["../../../@polymer/iron-icons/hardware-icons.js"], res, rej);
          });
          new Promise(function (res, rej) {
            return _require.default(["../../../@polymer/iron-icons/communication-icons.js"], res, rej);
          });
          new Promise(function (res, rej) {
            return _require.default(["../../../@polymer/iron-icons/social-icons.js"], res, rej);
          });
          new Promise(function (res, rej) {
            return _require.default(["../../../@polymer/iron-icons/av-icons.js"], res, rej);
          });
          new Promise(function (res, rej) {
            return _require.default(["../../../@polymer/iron-icons/maps-icons.js"], res, rej);
          });
          new Promise(function (res, rej) {
            return _require.default(["../../../@polymer/app-layout/app-drawer/app-drawer.js"], res, rej);
          });
          (0, _renderStatus.afterNextRender)(this, function () {
            this.addEventListener("hax-item-selected", this._processItemEvent.bind(this));
            this.dispatchEvent(new CustomEvent("hax-register-panel", {
              bubbles: true,
              cancelable: true,
              composed: true,
              detail: this
            }));
            document.body.addEventListener("hax-store-property-updated", this._haxStorePropertyUpdated.bind(this));
            document.body.addEventListener("hax-active-hover-name", this._activeNameChange.bind(this));
            document.body.addEventListener("hax-panel-operation", this._processItemEvent.bind(this));
          });
        }
      }, {
        key: "_activeNameChange",
        value: function _activeNameChange(e) {
          this.activeOperationName = e.detail;
        }
        /**
         * Global preference changed.
         */
  
      }, {
        key: "_globalPreferencesChanged",
        value: function _globalPreferencesChanged(newValue) {
          if (newValue && babelHelpers.typeof(newValue.haxShowExportButton) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined))) {
            this.hideExportButton = !newValue.haxShowExportButton;
          }
        }
        /**
         * Store updated, sync.
         */
  
      }, {
        key: "_haxStorePropertyUpdated",
        value: function _haxStorePropertyUpdated(e) {
          if (e.detail && babelHelpers.typeof(e.detail.value) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined)) && e.detail.property) {
            if (babelHelpers.typeof(e.detail.value) === "object") {
              this.set(e.detail.property, null);
            }
  
            this.set(e.detail.property, e.detail.value);
          }
        }
        /**
         * Process event for simple content inserts.
         */
  
      }, {
        key: "_processItemEvent",
        value: function _processItemEvent(e) {
          var detail = e.detail; // support a simple insert event to bubble up or everything else
  
          switch (detail.eventName) {
            case "open-panel":
              this._clickButton();
  
              break;
  
            case "cancel":
              this.toggle();
              this.dispatchEvent(new CustomEvent("hax-cancel", {
                bubbles: true,
                cancelable: true,
                composed: true,
                detail: detail
              }));
              break;
  
            case "text":
              detail.tag = "p";
              detail.content = "";
              this.dispatchEvent(new CustomEvent("hax-insert-content", {
                bubbles: true,
                cancelable: true,
                composed: true,
                detail: detail
              }));
              break;
  
            case "divider":
              detail.tag = "hr";
              detail.content = "";
              detail.properties = {
                style: "width:100%;"
              };
              this.dispatchEvent(new CustomEvent("hax-insert-content", {
                bubbles: true,
                cancelable: true,
                composed: true,
                detail: detail
              }));
              break;
  
            case "header":
              detail.tag = "h2";
              detail.content = "Header";
              this.dispatchEvent(new CustomEvent("hax-insert-content", {
                bubbles: true,
                cancelable: true,
                composed: true,
                detail: detail
              }));
              break;
  
            case "placeholder":
              detail.tag = "place-holder";
              detail.content = "";
              detail.properties = {
                style: "width:50%;"
              };
              this.dispatchEvent(new CustomEvent("hax-insert-content", {
                bubbles: true,
                cancelable: true,
                composed: true,
                detail: detail
              }));
              break;
  
            case "image":
              detail.tag = "img";
              detail.content = "";
              detail.properties = {
                src: pathFromUrl(decodeURIComponent(meta.url)) + window.HaxStore.instance.defaults.image.src,
                alt: window.HaxStore.instance.defaults.image.alt,
                style: "width:100%;"
              };
              this.dispatchEvent(new CustomEvent("hax-insert-content", {
                bubbles: true,
                cancelable: true,
                composed: true,
                detail: detail
              }));
              break;
  
            case "iframe":
              detail.tag = "iframe";
              detail.content = "";
              detail.properties = {
                src: window.HaxStore.instance.defaults.iframe.src,
                height: "400px",
                width: "100%",
                style: "width:100%;"
              };
              this.dispatchEvent(new CustomEvent("hax-insert-content", {
                bubbles: true,
                cancelable: true,
                composed: true,
                detail: detail
              }));
              break;
  
            case "blockquote":
              detail.tag = "blockquote";
              detail.content = "";
              this.dispatchEvent(new CustomEvent("hax-insert-content", {
                bubbles: true,
                cancelable: true,
                composed: true,
                detail: detail
              }));
              break;
  
            case "hax-manager-open":
              window.HaxStore.write("activeHaxElement", {}, this);
              window.HaxStore.instance.haxManager.resetManager(parseInt(detail.value));
              window.HaxStore.instance.haxManager.toggleDialog(false);
              break;
  
            case "hax-stax-picker-open":
              window.HaxStore.instance.haxStaxPicker.toggleDialog();
              break;
  
            case "hax-blox-picker-open":
              window.HaxStore.instance.haxBloxPicker.toggleDialog();
              break;
  
            case "undo":
              document.execCommand("undo");
              break;
  
            case "redo":
              document.execCommand("redo");
              break;
  
            default:
              // we sit on this, something else will have to handle it
              break;
          }
        }
        /**
         * _editModeChanged
         */
  
      }, {
        key: "_editModeChanged",
        value: function _editModeChanged(newValue, oldValue) {
          if (babelHelpers.typeof(newValue) !== (typeof undefined === "undefined" ? "undefined" : babelHelpers.typeof(undefined)) && newValue) {
            this.__tipText = "Save";
            this.shadowRoot.querySelector("#button").icon = "save";
          } else {
            this.__tipText = "Edit";
            this.shadowRoot.querySelector("#button").icon = "create";
          }
        }
        /**
         * Toggle the drawer when the button is clicked.
         */
  
      }, {
        key: "_clickEditButton",
        value: function _clickEditButton(e) {
          this.toggle();
        }
        /**
         * Toggle the drawer when the button is clicked.
         */
  
      }, {
        key: "_clickSaveButton",
        value: function _clickSaveButton(e) {
          this.toggle();
          this.dispatchEvent(new CustomEvent("hax-save", {
            bubbles: true,
            cancelable: true,
            composed: true,
            detail: e.detail
          }));
        }
        /**
         * HTML Export trigger.
         */
  
      }, {
        key: "_htmlExportDialog",
        value: function _htmlExportDialog(e) {
          window.HaxStore.instance.haxExport.toggleDialog();
        }
        /**
         * Preferences trigger.
         */
  
      }, {
        key: "_preferencesDialog",
        value: function _preferencesDialog(e) {
          window.HaxStore.instance.haxPreferences.toggleDialog();
        }
        /**
         * Toggle the panel.
         */
  
      }, {
        key: "toggle",
        value: function toggle(e) {
          window.HaxStore.write("editMode", !this.editMode, this);
          this.shadowRoot.querySelector("#drawer").opened = this.editMode;
  
          if (!this.shadowRoot.querySelector("#drawer").opened) {
            window.HaxStore.instance.closeAllDrawers();
          }
        }
      }], [{
        key: "template",
        get: function get() {
          return (0, _polymerElement.html)(_templateObject_466b2a10c3a111e99204fd28bf05b7e9());
        }
      }, {
        key: "tag",
        get: function get() {
          return "hax-panel";
        }
      }, {
        key: "properties",
        get: function get() {
          return {
            /**
             * Light variant for save button
             */
            light: {
              type: Boolean
            },
  
            /**
             * Display to the right corner instead of the left (default)
             */
            align: {
              type: String,
              reflectToAttribute: true,
              value: "left"
            },
  
            /**
             * State of the panel
             */
            editMode: {
              type: Boolean,
              reflectToAttribute: true,
              observer: "_editModeChanged"
            },
  
            /**
             * Showing export area.
             */
            hideExportButton: {
              type: Boolean,
              value: false
            },
  
            /**
             * Show developer mode
             */
            haxDeveloperMode: {
              type: Boolean,
              value: false
            },
  
            /**
             * active item name, useful to show users what they are working with
             */
            activeOperationName: {
              type: String
            },
  
            /**
             * Say we are editing content
             */
            editModeName: {
              type: String,
              value: "You are editing content"
            },
  
            /**
             * Showing preferences area.
             */
            hidePreferencesButton: {
              type: Boolean,
              value: false
            },
  
            /**
             * Showing button area at all a well as internal
             * state managing buttons like cancel and save
             */
            hidePanelOps: {
              type: Boolean,
              value: false
            },
  
            /**
             * Global preferences for HAX overall
             */
            globalPreferences: {
              type: Object,
              observer: "_globalPreferencesChanged"
            }
          };
        }
      }]);
      return HaxPanel;
    }(_polymerElement.PolymerElement);
  
    _exports.HaxPanel = HaxPanel;
    window.customElements.define(HaxPanel.tag, HaxPanel);
  });